/* =========================
   Webapp-only CSS
   Passt zu: templates/base.html, index.html, result.html
   Ziel: klare Layer-Abgrenzung (Hintergrund / Card / Controls / CTA)
   ========================= */

/* ---- Design Tokens ---- */
:root{
  /* ✅ Layer-Hierarchie: Hintergrund dunkler, Surface klarer, Controls bewusst "eingelassen" */
  --bg: #E3E0D8;            /* war #EEF1EE -> zu nah an Surface */
  --surface: #FFFFFF;

  /* Controls / secondary surfaces: sichtbar dunkler als Surface */
  --surface-2: #EAE7DF;      /* Eingabeflächen */
  --surface-3: #F6F4EE;      /* weiche Zwischenfläche (Tabs/Blocks) */

  /* Linien/Border sichtbarer + konsistenter */
  --line: rgba(0,0,0,.12);
  --line-strong: rgba(0,0,0,.16);

  --text: #1F2321;
  --muted: rgba(0,0,0,.58);

  /* ✅ ruhiges Salbei als Akzent */
  --accent: #6E8F7A;
  --accent-2: #5C7867;

  --danger: #D84C4C;
  --info: #3E67E6;
  --warn: #B8841F;

  --radius: 16px;
  --radius-pill: 999px;

  /* ✅ Schatten deutlich „layered“ (Card > Control) */
  --shadow: 0 22px 52px rgba(0,0,0,.18);
  --shadow-soft: 0 14px 34px rgba(0,0,0,.14);
  --shadow-control: 0 8px 18px rgba(0,0,0,.10);

  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;

  /* iOS safe-area support */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Base ---- */
*{ box-sizing: border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  /* Desktop: leichter, aber nicht „milchiger“ Glow – Background bleibt klar dunkler */
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(110,143,122,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 0%, rgba(62,103,230,.06), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.04), transparent 26%),
    var(--bg);
}

/* ---- Layout ---- */
.container{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
}

.app-header{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(246,248,245,.92);
  backdrop-filter: blur(10px);
}

.app-title{
  margin: 8px 0;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .2px;
  color: rgba(0,0,0,.80);
}

/* ---- Header row / actions ---- */
.header-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
}

.header-logout-form{
  display:inline;
  margin:0;
}

.header-logout-form button{
  font:inherit;
  cursor:pointer;
}

.header-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.86);
  color: rgba(0,0,0,.84);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  transition: border-color .15s ease, background .15s ease, transform .03s ease, color .15s ease, box-shadow .15s ease;
  user-select:none;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.header-link:hover{
  border-color: rgba(0,0,0,.24);
  background: rgba(255,255,255,.98);
  color: rgba(0,0,0,.92);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.header-link:active{ transform: translateY(1px); }

.app-footer{
  border-top: 1px solid var(--line);
  margin-top: 22px;
  color: var(--muted);
  background: rgba(255,255,255,.60);
}

.app-footer small{
  display:block;
  padding: 14px 0 4px 0;
}

/* ---- Typography ---- */
h1,h2,h3{ margin:0; }
h2{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}
p{ margin: 8px 0; }
.muted{ color: var(--muted); }

/* ---- Card ---- */
.card{
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

/* ---- Flash messages ---- */
.flash-messages{ margin: 0 0 12px 0; }

.flash{
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.flash.error{ border-color: rgba(216,76,76,.50); }
.flash.info{ border-color: rgba(62,103,230,.40); }

/* ---- Hints ---- */
.hint{
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.hint.info{ border-color: rgba(62,103,230,.34); }
.hint.warning{ border-color: rgba(184,132,31,.34); }

/* ---- AP 8.8: persönliche Testphasen-Bilanz ---- */
.card.retention-balance{
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 1040px;
  gap: clamp(18px, 3vw, 22px);
  padding: clamp(16px, 3vw, 24px);
}

.billing-page.retention-balance{ max-width: 1040px; }

.retention-conversion{
  display: grid;
  min-width: 0;
  gap: clamp(14px, 2.5vw, 18px);
}

.retention-hero{
  width: 100%;
  min-width: 0;
  max-width: 820px;
}
.retention-hero h1{
  max-width: 22ch;
  margin-bottom: 8px;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.retention-hero .page-intro{
  max-width: 64ch;
  font-size: clamp(15px, 3.8vw, 18px);
  line-height: 1.55;
}
.retention-trial-ended{ line-height: 1.55; }

.retention-successes{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.retention-success{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  min-width: 0;
  gap: 0 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-3);
}

.retention-success strong{
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.retention-success span{ color: var(--text); font-weight: 650; }
.retention-success small{ grid-column: 1 / -1; color: var(--muted); }

.retention-conversion-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
}

.retention-impact,
.retention-return,
.retention-details{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: clamp(14px, 2.3vw, 18px);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.retention-impact{ background: var(--surface-3); }

.retention-return{
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
}

.retention-impact h2,
.retention-return h2,
.retention-details h2{
  margin-bottom: 7px;
  font-size: clamp(18px, 4.8vw, 20px);
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.retention-impact p,
.retention-return p,
.retention-details p{
  margin: 0;
  font-size: clamp(15px, 2.4vw, 16px);
  line-height: 1.58;
}

.retention-list{ margin: 11px 0 0; padding-left: 20px; }
.retention-list li + li{ margin-top: 5px; }
.retention-return form{ margin-top: 15px; }
.retention-return .btn{ width: 100%; }
.retention-return--active{ max-width: 620px; }
.retention-return .retention-price{
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.retention-secondary-links{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: 14px;
}
.retention-secondary-links a{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.retention-details{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  background: var(--surface-3);
}
.retention-details > div{ min-width: 0; }

.retention-details > div + div{
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.retention-deletion p + p{ margin-top: 7px; }
.retention-date{ font-size: 15px; }

@media (min-width: 480px){
  .retention-successes{
    grid-template-columns: repeat(2, minmax(0, 190px));
  }
}

@media (min-width: 801px){
  .retention-conversion-grid{
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  }
  .retention-details{
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    gap: 18px;
  }
  .retention-details > div + div{
    padding: 0 0 0 18px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}

@media (max-width: 420px){
  .retention-success{ padding: 8px; }
  .retention-success span{ font-size: 13px; }
  .retention-success small{ font-size: 11px; line-height: 1.3; }
}

/* ---- Field errors (inline) ---- */
.field-error{
  margin-top: 6px;
  color: rgba(216,76,76,.92);
  font-size: 13px;
  line-height: 1.25;
}

/* ---- Forms ---- */
form{ margin: 0; }

.form-row{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.form-row:last-child{ border-bottom: none; }

label{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.25;
}

.form-row > label{
  flex: 0 0 200px;
  padding-top: 10px;
}

.form-row > input,
.form-row > select,
.form-row > textarea{
  flex: 1 1 auto;
  min-width: 0;
}

/* ✅ Controls: „eingelassen“ + klar vom Card-White getrennt */
select, input{
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 46px;
  min-width: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
}

select:focus, input:focus{
  border-color: rgba(110,143,122,.70);
  box-shadow: 0 0 0 3px rgba(110,143,122,.18);
}

.form-actions{
  margin-top: 14px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

/* ---- Buttons ---- */
.btn{
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 46px;
  cursor: pointer;
  transition: transform .03s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  user-select: none;
  box-shadow: var(--shadow-control);
}

.btn.block{
  width: 100%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
}

.btn:hover{
  border-color: rgba(0,0,0,.28);
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.btn:active{ transform: translateY(1px); }

.btn.primary{
  border-color: rgba(110,143,122,.68);
  background: linear-gradient(180deg, rgba(110,143,122,.30), rgba(110,143,122,.16));
  box-shadow: 0 16px 34px rgba(110,143,122,.18);
}

.btn.primary:hover{
  border-color: rgba(110,143,122,.88);
  background: linear-gradient(180deg, rgba(110,143,122,.36), rgba(110,143,122,.20));
  box-shadow: 0 18px 38px rgba(110,143,122,.20);
}

.btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---- Result header ---- */
.result-header{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.result-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.64);
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* ---- "Commit"-Block ---- */
.commit{
  display:flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 12px 0 14px 0;
  background: var(--surface-3);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.commit-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(110,143,122,.95);
  box-shadow: 0 0 0 4px rgba(110,143,122,.16);
}

/* ---- Tabs ---- */
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.tab{
  border: 1px solid rgba(0,0,0,.16);
  background: var(--surface-3);
  color: rgba(0,0,0,.64);
  border-radius: var(--radius-pill);
  padding: 9px 13px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.tab:hover{
  border-color: rgba(0,0,0,.26);
  background: rgba(255,255,255,.98);
  color: rgba(0,0,0,.78);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.tab.active{
  color: rgba(0,0,0,.92);
  border-color: rgba(110,143,122,.70);
  background: rgba(110,143,122,.18);
  box-shadow: 0 12px 26px rgba(110,143,122,.16);
}

/* ---- Panels / Output ---- */
.tabpanel{ display:none; }
.tabpanel.active{ display:block; }

.output{
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;

  white-space: pre-wrap;
  word-break: break-word;

  /* ✅ Output als „eigene Ebene“ auf Card: sichtbar abgesetzt */
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 16px;

  padding: 16px 16px;
  margin: 0;

  min-height: 260px;
  overflow: auto;

  letter-spacing: .1px;

  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* ---- Textareas ---- */
.textarea{
  width: 100%;
  min-height: 120px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--font);
  line-height: 1.4;
  resize: vertical;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
}

.textarea:focus{
  border-color: rgba(110,143,122,.70);
  box-shadow: 0 0 0 3px rgba(110,143,122,.18);
}

/* =========================
   Working Overlay (UX_2)
   ========================= */

/* Inline-Wait-Panel (Job-Flow) */
.wait-panel{
  border: 1px solid rgba(0,0,0,.14);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.94);
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.wait-sub{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
  flex: 1;
  min-width: 180px;
}

.wait-timer{
  font-size: 22px;
  font-weight: 850;
  letter-spacing: .5px;
  color: var(--accent);
  white-space: nowrap;
}

@media (max-width: 520px){
  .wait-panel{ flex-direction: column; align-items: flex-start; }
  .wait-timer{ align-self: center; width: 100%; text-align: center; }
}

.working-overlay{
  position: fixed;
  inset: 0;
  /* ✅ klar dunkler, damit Modal wirklich absetzt */
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.working-overlay.active{ display: flex; }

.working-box{
  background: rgba(255,255,255,.985);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: var(--radius);
  padding: 28px 26px;
  text-align: center;
  box-shadow: var(--shadow);
  max-width: 420px;
  width: 90%;
}

.working-title{
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
}

.working-sub{
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 18px;
}

.working-timer{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--accent);
}

/* =========================
   Rating Gate Overlay (UX)
   ========================= */
body.modal-open{ overflow: hidden; }

.rating-gate-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9999;
}

.rating-gate-box{
  width: 100%;
  max-width: 520px;
  background: rgba(255,255,255,.985);
  color: var(--text);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.rating-gate-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}

.rating-gate-why{
  margin-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.10);
  padding-top: 12px;
}

.rating-gate-why .why-title{
  color: rgba(0,0,0,0.78);
  font-weight: 750;
}

/* ==========================================================
   Onboarding overlay + tour highlights (mobile-first)
   ========================================================== */
.onboarding-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.44);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 9998;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.onboarding-overlay.active{ display: flex; }

.onboarding-box{
  width: 100%;
  max-width: 520px;
  background: rgba(255,255,255,.975);
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0,0,0,0.18);
  padding: 18px;
}

.onboarding-box h2{ margin: 0 0 10px 0; font-size: 20px; }
.onboarding-box p{ margin: 0 0 12px 0; line-height: 1.45; }

.tour-hint{
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.tour-hint strong{ display:block; margin-bottom:6px; }

.btn.wide{ min-width: 240px; width: 100%; justify-content: center; }

/* =========================
   Fixed Bottom CTA (always visible)
   ========================= */
.has-bottom-bar{
  padding-bottom: calc(92px + var(--safe-bottom));
}

.action-group{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.bottom-bar{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  padding: 10px 14px calc(10px + var(--safe-bottom)) 14px;

  /* ✅ klare Trennung, wirkt wie eigene Ebene */
  border-top: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.985);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -18px 46px rgba(0,0,0,.18);
}

@supports (padding: max(0px)) {
  .bottom-bar{
    bottom: max(0px, env(safe-area-inset-bottom));
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

.bottom-bar .inner{ max-width: 980px; margin: 0 auto; }
.bottom-bar .row{ display:flex; gap:10px; align-items:center; }
.bottom-bar .row .btn{ flex: 1 1 auto; width: 100%; }
.bottom-bar .sub{
  margin-top: 6px;
  color: rgba(0,0,0,.62);
  font-size: 12px;
  line-height: 1.25;
}

/* =========================
   Mobile Header: Home / Profil / Logout sauber in EINER Zeile
   ========================= */
.header-home{ display:none; }

@media (max-width: 720px){

  /* Mobile: Background ohne Gradient-Noise, aber dunkler als Cards */
  body{ background: var(--bg); }

  .container{ padding: 14px; }

  .card{
    padding: 14px;
    box-shadow: 0 14px 34px rgba(0,0,0,.14);
    background: var(--surface);
    border: 1px solid rgba(0,0,0,.14);
  }

  .result-header{
    flex-direction: column;
    align-items: stretch;
  }

  .result-actions{ justify-content: flex-start; }

  .header-row{
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .app-title{ margin: 8px 0 0 0; }

  .header-actions{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .header-home{ display:inline-flex; }

  .header-actions .header-link{
    flex: 1 1 0;
    justify-content: center;
    padding: 10px 10px;
  }

  .header-home, .header-logout{ flex: 0 1 30%; }
  .header-profile{ flex: 1 1 40%; }

  .form-row{
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid rgba(0,0,0,.08);
  }

  .form-row > label{
    flex: none;
    padding-top: 0;
  }

  select, input{
    width: 100%;
    min-width: 0;
  }

  .tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  .tab{ white-space: nowrap; }

  .output{
    font-size: 16px;
    line-height: 1.7;
    padding: 16px 14px;
    min-height: 0;
    max-height: 55vh;
  }

  .form-actions{ justify-content: stretch; }
  .form-actions .btn{ width: 100%; }

  .result-actions{
    flex-direction: column;
    align-items: stretch;
  }

  .result-actions .btn{ width: 100%; }

  .action-group{
    width: 100%;
    justify-content: space-between;
  }

  .result-home{ display: none; }
}

/* ---- Profil: Kinderalter Dropdowns ---- */
.children-ages-selects{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.child-age-item{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.child-age-label{
  font-size: 13px;
  color: rgba(0,0,0,.64);
}

.child-age-select{
  min-width: 120px;
}

@media (max-width: 720px){
  .child-age-item{ flex-direction: column; align-items: stretch; }
  .child-age-select{ width: 100%; min-width: 0; }
}

/* ---- Tables ---- */
.table{
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.98);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
}

.table th{
  color: rgba(0,0,0,.64);
  font-weight: 750;
  text-align: left;
  background: rgba(0,0,0,.04);
}

.table tr:last-child td{ border-bottom: none; }

/* ---- Small utilities ---- */
.row{ display:flex; gap: 10px; flex-wrap: wrap; }
.right{ text-align:right; }
.hr{ height:1px; background: rgba(0,0,0,.12); margin: 12px 0; }

/* ---- Spacing helpers ---- */
.mt-8{ margin-top:8px; }
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.mb-8{ margin-bottom:8px; }
.mb-12{ margin-bottom:12px; }

/* ---- Checkboxes / toggles ---- */
.checkbox-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.checkbox-row:last-child{ border-bottom: none; }

.checkbox-row label{
  flex: 1;
  color: rgba(0,0,0,.84);
}

.checkbox-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* ---- Pills / chips ---- */
.chips{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.94);
  padding: 8px 10px;
  font-size: 13px;
  color: rgba(0,0,0,.84);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

.chip .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(110,143,122,.92);
  box-shadow: 0 0 0 4px rgba(110,143,122,.14);
}

/* ---- Code-ish blocks (but readable) ---- */
.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.8px;
  line-height: 1.5;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

/* ---- Inline labels ---- */
.kv{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 12px;
}

.kv .k{ color: var(--muted); font-size: 13px; }
.kv .v{ color: rgba(0,0,0,.92); font-weight: 750; }

/* ---- Links ---- */
a{ color: rgba(110,143,122,.98); }
a:hover{ color: rgba(92,120,103,1); }

/* ---- Mobile fine-tuning (extra small) ---- */
@media (max-width: 380px){
  .header-actions{ gap: 8px; }
  .header-actions .header-link{ padding: 10px 8px; font-size: 12.5px; }
}

/* recipe view radios */
.radio-group{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  padding-top:2px;
}

.radio{
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}

.radio input{ transform: translateY(1px); }

/* small subtabs inside Rezepte */
.subtabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.subtab{
  border:1px solid rgba(0,0,0,.18);
  background: rgba(0,0,0,.05);
  color: var(--text, #1F2321);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.subtab.active{
  border-color: rgba(110,143,122,.82);
  box-shadow: 0 0 0 2px rgba(110,143,122,.16) inset, 0 12px 26px rgba(110,143,122,.12);
  background: rgba(110,143,122,.12);
}

.subtab:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow: none;
}

/* --- Rating Overlay (Fullscreen) --- */
/* (zusätzlich zum Rating-Gate: dieselbe Layer-Optik, damit nichts "gleich" wirkt) */
.modal-open{
  overflow: hidden !important;
  height: 100%;
}

.rating-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.44);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.rating-modal{
  width: 100%;
  max-width: 620px;
  border-radius: 18px;
  padding: 18px 16px;
  background: rgba(255,255,255,.985);
  border: 1px solid rgba(0,0,0,0.16);
  box-shadow: 0 22px 52px rgba(0,0,0,0.18);
}

.rating-modal h3{
  margin: 0 0 10px 0;
}

.rating-lead{
  margin: 0 0 14px 0;
  line-height: 1.35;
  opacity: 0.95;
}

.rating-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 12px;
}

.rating-why{
  border-top: 1px solid rgba(0,0,0,0.12);
  margin-top: 10px;
  padding-top: 12px;
}

.rating-why-title{
  font-weight: 800;
  margin-bottom: 6px;
}

.rating-why-text{
  opacity: 0.86;
  line-height: 1.35;
  font-size: 13px;
}

@media (max-width: 520px){
  .rating-actions{
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   Tafelia UI 1.1 – gemeinsames Website-/App-Fundament
   Verbindliche Quelle: Tafelia Design-System 1.1.0
   Späte Regeln ersetzen die frühere eigenständige App-Farbwelt.
   ========================================================== */

:root{
  --ap-bg: #EEF1EE;
  --ap-surface: #FFFFFF;
  --ap-surface-soft: #F6F8F5;
  --ap-surface-muted: #F0F3F0;
  --ap-text-strong: #1F2321;
  --ap-text: #2C2C2C;
  --ap-text-muted: #5B615D;
  --ap-line: #D2D8D2;
  --ap-line-strong: #B8C0B9;
  --ap-brand: #6E8F7A;
  --ap-brand-strong: #5C7867;
  --ap-brand-hover: #4C6657;
  --ap-brand-soft: #E5ECE7;
  --ap-success: #2F6B47;
  --ap-danger: #B42318;
  --ap-warning: #8A5A00;
  --ap-info: #285EA8;
  --ap-radius-control: 12px;
  --ap-radius-button: 14px;
  --ap-radius-card: 18px;
  --ap-radius-hero: 22px;
  --ap-radius-pill: 999px;
  --ap-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Kompatibilitätsnamen für bestehende Templates */
  --bg: var(--ap-bg);
  --surface: var(--ap-surface);
  --surface-2: var(--ap-surface-soft);
  --surface-3: var(--ap-surface-muted);
  --line: var(--ap-line);
  --line-strong: var(--ap-line-strong);
  --text: var(--ap-text-strong);
  --muted: var(--ap-text-muted);
  --accent: var(--ap-brand);
  --accent-2: var(--ap-brand-strong);
  --danger: var(--ap-danger);
  --info: var(--ap-info);
  --warn: var(--ap-warning);
  --radius: var(--ap-radius-card);
  --radius-pill: var(--ap-radius-pill);
  --font: var(--ap-font);
  --shadow: none;
  --shadow-soft: none;
  --shadow-control: none;
}

html{
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--ap-bg);
}

body{
  min-height: 100dvh;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ap-text);
  background: var(--ap-bg);
  font-family: var(--ap-font);
  font-size: 16px;
  line-height: 1.6;
}

.container{
  width: 100%;
  max-width: 1104px;
  margin-inline: auto;
  padding-inline: 32px;
}

.app-main{
  flex: 1 0 auto;
  padding-top: 32px;
  padding-bottom: 48px;
}

.app-header{
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 72px;
  border-bottom: 1px solid var(--ap-line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-row{
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.app-title{
  margin: 0;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.app-title a{
  color: var(--ap-text-strong);
  text-decoration: none;
}

.header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.header-link{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ap-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.header-link:hover,
.header-link.active{
  border-color: transparent;
  background: var(--ap-surface-muted);
  color: var(--ap-brand-hover);
  box-shadow: none;
}

.header-logout{
  color: var(--ap-text-muted);
}

h1,h2,h3,h4{
  margin: 0;
  color: var(--ap-text-strong);
}

h1{
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

h2{
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

h3{
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}

h4{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
}

p{ margin: 8px 0; }
.muted, .meta-text{ color: var(--ap-text-muted); }
.meta-text{ font-size: 13px; font-weight: 600; line-height: 1.45; }

a{
  color: var(--ap-text-strong);
  font-weight: 600;
  text-decoration: underline;
}

a:hover{ color: var(--ap-text-strong); }

.card{
  padding: 24px;
  background: var(--ap-surface);
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-card);
  box-shadow: none;
}

.btn{
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--ap-brand-strong);
  border-radius: var(--ap-radius-button);
  background: transparent;
  color: var(--ap-brand-strong);
  font: 700 16px/1.2 var(--ap-font);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 30ms ease;
}

.btn:hover{
  border-color: var(--ap-brand-hover);
  background: var(--ap-brand-soft);
  color: var(--ap-brand-hover);
  box-shadow: none;
}

.btn.primary{
  border-color: var(--ap-brand-strong);
  background: var(--ap-brand-strong);
  color: var(--ap-surface);
  box-shadow: none;
}

.btn.primary:hover{
  border-color: var(--ap-brand-hover);
  background: var(--ap-brand-hover);
  color: var(--ap-surface);
  box-shadow: none;
}

.btn.secondary{
  border-color: var(--ap-brand-strong);
  background: transparent;
  color: var(--ap-brand-strong);
  box-shadow: none;
}

.btn.secondary:hover{
  border-color: var(--ap-brand-hover);
  background: var(--ap-brand-soft);
  color: var(--ap-brand-hover);
  box-shadow: none;
}

.btn.tertiary{
  min-height: 44px;
  padding-inline: 10px;
  border-color: transparent;
  background: transparent;
  color: var(--ap-text-muted);
}

.btn.compact{ min-height: 40px; padding: 8px 12px; font-size: 14px; }

.btn:active{ transform: translateY(1px); }

.btn:disabled{
  border-color: var(--ap-line);
  background: var(--ap-surface-muted);
  color: var(--ap-text-muted);
  opacity: .68;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--ap-brand-hover);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(92,120,103,.28);
}

select,
input,
.textarea,
textarea{
  min-height: 52px;
  padding: 14px;
  border: 1px solid var(--ap-line-strong);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
  color: var(--ap-text-strong);
  font: 400 16px/1.5 var(--ap-font);
  box-shadow: none;
}

select:focus,
input:focus,
.textarea:focus,
textarea:focus{
  border-color: var(--ap-brand-hover);
  background: var(--ap-surface-soft);
  box-shadow: none;
}

label{
  color: var(--ap-text-strong);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.flash,
.hint{
  padding: 12px 14px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
  color: var(--ap-text);
  box-shadow: none;
}

.flash.error{ border-color: var(--ap-danger); }
.flash.info{ border-color: var(--ap-info); }
.hint.warning{ border-color: var(--ap-warning); }

/* Ergebnisansicht */
.result-card{ padding: 32px; }

.result-header{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 32px;
  margin-bottom: 24px;
}

.result-heading{ max-width: 660px; }

.eyebrow{
  display: block;
  margin-bottom: 8px;
  color: var(--ap-brand-strong);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.result-intro{
  margin: 12px 0 0;
  color: var(--ap-text-muted);
  font-size: 17px;
  line-height: 1.5;
}

.result-actions{
  display: flex;
  justify-content: flex-end;
}

.action-group{
  max-width: 290px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.action-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ap-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.badge{
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-pill);
  background: var(--ap-surface-soft);
  color: var(--ap-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: none;
}

.commit{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
  box-shadow: none;
}

.commit-dot{
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ap-brand);
  box-shadow: none;
}

.result-done-card{
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: rgba(96, 128, 108, .045);
  box-shadow: none;
}

.result-done-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--ap-text-strong);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.result-done-dot{
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ap-brand);
}

.result-checks{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.result-check{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--ap-line);
  border-radius: 10px;
  background: var(--ap-surface);
  color: var(--ap-text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.result-check span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(96, 128, 108, .14);
  color: var(--ap-brand-strong);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.result-check strong{
  color: var(--ap-text-strong);
  font-weight: 700;
}

.tabs{
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-muted);
}

.tab{
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ap-text-muted);
  font: 600 14px/1.5 var(--ap-font);
  cursor: pointer;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.tab:hover{
  border-color: transparent;
  background: var(--ap-surface-soft);
  color: var(--ap-text-strong);
  box-shadow: none;
}

.tab.active{
  border-color: var(--ap-line-strong);
  background: var(--ap-surface);
  color: var(--ap-text-strong);
  box-shadow: none;
}

.tabpanel{ display: none; }
.tabpanel.active{ display: block; }

.output{
  min-height: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 20px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface);
  color: var(--ap-text);
  font: 400 16px/1.6 var(--ap-font);
  letter-spacing: 0;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: none;
}

.plan-raw{
  display: none;
}

.plan-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface);
  overflow: hidden;
}

.plan-day-card{
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid var(--ap-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.plan-day-media{
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--ap-surface-muted);
}

.plan-day-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plan-day-content{ min-width: 0; }

.recipe-card-list{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  width: 100%;
}

.recipe-card-list[hidden]{ display: none; }

.recipe-detail-card{
  overflow: hidden;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface);
}

.recipe-card-head{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ap-line);
}

.recipe-card-day{
  flex: 0 0 auto;
  min-width: 42px;
  padding: 5px 9px;
  border-radius: var(--ap-radius-pill);
  background: rgba(96, 128, 108, .14);
  color: var(--ap-brand-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.recipe-card-heading{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.recipe-card-heading h2{
  margin: 0;
  color: var(--ap-text-strong);
  font-size: 20px;
  line-height: 1.35;
}

.recipe-card-tag{
  align-self: flex-start;
  color: var(--ap-text-muted);
  font-size: 12px;
  font-weight: 700;
}

.recipe-card-media{
  overflow: hidden;
  width: min(100%, 768px);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  background: var(--ap-surface-muted);
}

.recipe-card-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-card-body{
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 18px;
  border: 0;
  border-top: 1px solid var(--ap-line);
  background: var(--ap-surface);
  color: var(--ap-text);
  font: 400 16px/1.65 var(--ap-font);
  white-space: pre-wrap;
  word-break: break-word;
}

.plan-day-card:last-child{
  border-bottom: 0;
}

.plan-day-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.plan-day-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 26px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(96, 128, 108, .14);
  color: var(--ap-brand-strong);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.plan-day-tag{
  padding: 3px 8px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-pill);
  background: var(--ap-surface-soft);
  color: var(--ap-text-muted);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
}

.plan-day-title{
  color: var(--ap-text-strong);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.5;
}

.plan-day-meta{
  margin-top: 7px;
  color: var(--ap-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.result-change-panel{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  gap: 18px;
  align-items: center;
  margin: 22px 0 0;
  padding: 16px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
  box-shadow: none;
}

.result-change-copy{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--ap-text-muted);
  font-size: 14px;
  line-height: 1.45;
}

.result-change-copy strong{
  color: var(--ap-text-strong);
  font-size: 15px;
  line-height: 1.35;
}

.recipe-toolbar{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.period-filter{
  display: grid;
  grid-template-columns: auto minmax(150px, 190px) 1fr;
  align-items: center;
  gap: 6px 10px;
  margin: 18px 0 12px;
}

.period-range{
  display: flex;
  align-items: center;
  gap: 8px;
}

.period-filter .meta-text{ grid-column: 2 / -1; min-height: 19px; }

.subtabs{
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-muted);
}

.subtab{
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ap-text-muted);
  font: 600 14px/1.5 var(--ap-font);
  cursor: pointer;
  box-shadow: none;
}

.subtab:hover,
.subtab.active{
  border-color: var(--ap-line-strong);
  background: var(--ap-surface);
  color: var(--ap-text-strong);
  box-shadow: none;
}

.result-export{
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ap-line);
}

.result-export-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.result-export-help{
  margin: 8px 0 0;
  color: var(--ap-text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

/* Frühere feste Exportleiste vollständig neutralisieren */
.has-bottom-bar{ padding-bottom: 0; }
.bottom-bar{ position: static !important; padding: 0; border: 0; background: transparent; box-shadow: none; }

.mini-toast{
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-bottom));
  z-index: 99999;
  width: min(520px, calc(100% - 36px));
  display: none;
  transform: translateX(-50%);
  padding: 12px 14px;
  border-radius: var(--ap-radius-control);
  background: var(--ap-text-strong);
  color: var(--ap-surface);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: none;
}

.copy-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  padding: 18px;
  background: rgba(31,35,33,.46);
}

.copy-modal-dialog{
  max-width: 760px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-card);
  background: var(--ap-surface);
  box-shadow: none;
}

.copy-modal-header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copy-modal-title{ color: var(--ap-text-strong); font-size: 20px; font-weight: 700; line-height: 1.35; }
.copy-modal-help{ margin: 8px 0 12px; }
.copy-modal-text{ width: 100%; height: 55vh; }

/* Overlays dürfen als echte höhere Ebene einen zurückhaltenden Schatten tragen. */
.working-box,
.onboarding-box,
.rating-gate-box,
.rating-modal{
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-card);
  background: var(--ap-surface);
  color: var(--ap-text);
  box-shadow: 0 14px 34px rgba(31,35,33,.12);
}

.status-card{
  width: min(560px,100%);
  margin: clamp(40px,10vh,110px) auto;
  padding: 32px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-card);
  background: var(--ap-surface);
  text-align: center;
}

.status-card h1{ font-size: 32px; line-height: 1.2; letter-spacing: 0; }
.status-card p{ margin: 12px auto 0; color: var(--ap-text-muted); }
.status-indicator{ width: 12px; height: 12px; margin: 0 auto 18px; border-radius: 50%; background: var(--ap-brand); }

/* Gemeinsame Seiten- und Formularstruktur */
.page-header{
  margin-bottom: 28px;
}

.page-header--with-actions{
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: start;
  gap: 24px;
}

.page-intro{
  max-width: 720px;
  margin: 12px 0 0;
  color: var(--ap-text-muted);
  font-size: 18px;
  line-height: 1.55;
}

.trial-notice{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid var(--ap-line);
  border-radius: 12px;
  background: var(--ap-surface-muted);
  color: var(--ap-text);
}
.trial-notice--quiet{ font-size: 15px; }
.trial-notice--quiet span{ color: var(--ap-text-muted); }
.trial-notice__content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.trial-notice--prominent{
  padding: 18px;
  border-color: color-mix(in srgb, var(--ap-brand) 38%, var(--ap-line));
  background: color-mix(in srgb, var(--ap-brand) 8%, var(--ap-surface));
}
.trial-notice__close{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ap-text-muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.trial-notice__close:hover,
.trial-notice__close:focus-visible{ background: var(--ap-surface); color: var(--ap-text); }
.retention-trial-ended{
  max-width: 720px;
  margin: 14px 0 0;
  color: var(--ap-text);
}

.page-actions,
.status-actions,
.billing-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-actions form{ margin: 0; }

.planning-card,
.profile-card,
.ratings-card{
  padding: 32px;
}

.planning-form,
.form-section{
  border-top: 1px solid var(--ap-line);
  padding-top: 24px;
}

.planning-block{
  position: relative;
  scroll-margin-top: 96px;
  padding: 22px 0 4px;
  border-top: 1px solid var(--ap-line);
}

.planning-block:first-of-type{
  padding-top: 0;
  border-top: 0;
}

.planning-block + .planning-block{
  margin-top: 18px;
}

.planning-block-header{
  margin-bottom: 4px;
}

.planning-block-header h2{
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
}

.planning-block-header p{
  margin: 5px 0 0;
  color: var(--ap-text-muted);
  line-height: 1.5;
}

.planning-intro{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 4px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, var(--ap-brand) 38%, var(--ap-line));
  border-radius: var(--ap-radius-control);
  background: var(--ap-brand-soft);
}
.planning-intro p{ margin: 3px 0 0; color: var(--ap-text-muted); }
.planning-intro-error{ color: var(--ap-danger) !important; font-size: 13px; }
.planning-intro-dismiss{ flex: 0 0 auto; }
.planning-heading-line{
  display: flex;
  align-items: center;
  gap: 8px;
}
.planning-help-button{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: -10px 0 -10px -5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ap-brand-strong);
  font: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.planning-help-button:hover,
.planning-help-button:focus-visible,
.planning-help-button[aria-expanded="true"]{ background: var(--ap-brand-soft); }
.planning-help-button:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--ap-brand) 28%, transparent);
  outline-offset: 1px;
}
.planning-help-popover{
  position: relative;
  max-width: 560px;
  margin-top: 10px;
  padding: 12px 44px 12px 13px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
  color: var(--ap-text);
}
.planning-help-popover[hidden]{ display: none; }
.planning-help-popover p{ margin: 0; color: var(--ap-text); }
.planning-help-popover button{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.planning-help-popover button::after{
  content: "×";
  color: var(--ap-text-muted);
  font-size: 23px;
  line-height: 1;
}
.planning-help-popover button:hover,
.planning-help-popover button:focus-visible{ background: var(--ap-surface); }
.planning-help-popover button:focus-visible{
  outline: 2px solid var(--ap-brand);
  outline-offset: 1px;
}

.form-section-title-line{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.form-section-title-line h2{ margin: 0; }
.form-section-badge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: var(--ap-radius-pill);
  background: var(--ap-brand-soft);
  color: var(--ap-brand-strong);
  font-size: 12px;
  font-weight: 700;
}
.form-section-badge--optional{
  background: var(--ap-surface-muted);
  color: var(--ap-text-muted);
}

.planning-block .form-row:last-child{
  border-bottom: 0;
}

.planning-block--submit{
  padding-bottom: 0;
}

.form-section + .form-section{
  margin-top: 28px;
}

.form-section-header{
  margin-bottom: 10px;
}

.form-section-header h2{
  font-size: 24px;
  line-height: 1.3;
}

.form-section-header p{
  margin: 6px 0 0;
  color: var(--ap-text-muted);
}

.form-row{
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  align-items: start;
  gap: 8px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ap-line);
}

.form-row > label{
  padding-top: 14px;
}

.form-row > .muted,
.form-row > .field-error{
  grid-column: 2;
}

.form-help{ margin-top: 2px; }
.serving-stack{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding-top: 6px;
}
.serving-default-copy{
  color: var(--ap-text-muted);
  line-height: 1.5;
}
.serving-toggle{
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 44px;
  margin-top: 3px;
  padding: 0;
  font-weight: 650;
  cursor: pointer;
}
.serving-toggle-input{
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.serving-toggle-track{
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border: 1px solid var(--ap-line-strong);
  border-radius: 999px;
  background: var(--ap-surface-muted);
  transition: border-color .16s ease, background-color .16s ease;
}
.serving-toggle-thumb{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ap-surface);
  box-shadow: 0 1px 3px rgba(19, 35, 29, .2);
  transition: transform .16s ease;
}
.serving-toggle-input:checked + .serving-toggle-track{
  border-color: var(--ap-brand);
  background: var(--ap-brand);
}
.serving-toggle-input:checked + .serving-toggle-track .serving-toggle-thumb{
  transform: translateX(18px);
}
.serving-toggle-input:focus-visible + .serving-toggle-track{
  outline: 3px solid color-mix(in srgb, var(--ap-brand) 28%, transparent);
  outline-offset: 2px;
}
.serving-toggle:hover .serving-toggle-track{
  border-color: var(--ap-brand);
}
.serving-overrides{
  display: grid;
  width: 100%;
  margin-top: 8px;
  border-top: 1px solid var(--ap-line);
  border-bottom: 1px solid var(--ap-line);
}
.serving-overrides[hidden]{ display: none; }
.serving-day-row{
  display: grid;
  grid-template-columns: 36px 144px minmax(66px, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--ap-line);
}
.serving-day-row:last-child{ border-bottom: 0; }
.serving-day-label{
  color: var(--ap-text-muted);
  font-weight: 700;
}
.serving-stepper{
  display: grid;
  grid-template-columns: 44px 54px 44px;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid var(--ap-line-strong);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface);
}
.serving-stepper-button{
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ap-surface-soft);
  color: var(--ap-brand-strong);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}
.serving-stepper-button:first-child{ border-right: 1px solid var(--ap-line); }
.serving-stepper-button:last-child{ border-left: 1px solid var(--ap-line); }
.serving-stepper-button:hover:not(:disabled){ background: var(--ap-brand-soft); }
.serving-stepper-button:disabled{
  color: var(--ap-text-muted);
  cursor: default;
  opacity: .62;
}
.serving-stepper-button:focus-visible{
  position: relative;
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--ap-brand) 28%, transparent);
  outline-offset: -3px;
}
.serving-value{
  width: 54px !important;
  min-height: 44px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ap-surface) !important;
  color: var(--ap-text);
  font-weight: 750;
  text-align: center;
  appearance: textfield;
}
.serving-value::-webkit-inner-spin-button,
.serving-value::-webkit-outer-spin-button{
  margin: 0;
  appearance: none;
}
.serving-value:focus-visible{
  position: relative;
  z-index: 1;
  outline: 3px solid color-mix(in srgb, var(--ap-brand) 28%, transparent);
  outline-offset: -3px;
}
.serving-unit{
  color: var(--ap-text-muted);
  font-size: .92rem;
  white-space: nowrap;
}
.serving-day-row.is-override .serving-day-label,
.serving-day-row.is-override .serving-unit{
  color: var(--ap-brand-strong);
}
.serving-day-row.is-override .serving-stepper{
  border-color: color-mix(in srgb, var(--ap-brand) 48%, var(--ap-line));
}
.serving-day-row.is-override .serving-value{
  background: var(--ap-brand-soft) !important;
}
.serving-help{
  width: 100%;
  margin-top: 7px;
  margin-bottom: 1px;
  color: var(--ap-text-muted);
  font-size: .9rem;
}
.serving-help[hidden]{ display: none; }
.restore-action{ margin: 12px 0 18px; }
.restore-action form,
.rating-gate-actions form{ margin: 0; }

.rating-gate-box h3{ margin: 0 0 10px; }
.rating-status-box{
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
}
.rating-status-title{ margin-bottom: 6px; font-size: 14px; }
.rating-status-copy{ font-size: 13px; line-height: 1.5; }
.rating-gate-intro{ margin: 0 0 12px; }
.rating-gate-actions form{ flex: 1 1 220px; }
.rating-gate-reason{ margin: 8px 0 0; }
.ratings-empty-action{ margin-top: 12px; }
.onboarding-actions{ display: flex; gap: 10px; margin-top: 14px; }
.onboarding-separator{ margin: 14px 0; border: 0; border-top: 1px solid var(--ap-line); }
.onboarding-note{ margin-top: 10px; }

/* Auch seltene Bestandskomponenten bleiben flach und tokenbasiert. */
.table,
.chip,
.code,
.wait-panel,
.tour-hint{
  border-color: var(--ap-line);
  background: var(--ap-surface-soft);
  color: var(--ap-text);
  box-shadow: none;
}

.form-actions{
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.auth-card{
  width: min(560px,100%);
  margin: clamp(20px,5vh,56px) auto;
  padding: 32px;
}

.auth-card h1{
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0;
}

.auth-card .page-intro{
  font-size: 16px;
  line-height: 1.6;
}

.auth-form{
  margin-top: 18px;
}

.auth-form .form-row{
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 0;
  border: 0;
}

.auth-form .form-row > label{
  flex: none;
  padding: 0;
}
.auth-form .form-row > input,
.auth-form .form-row > select,
.auth-form .form-row > textarea{
  flex: none;
  width: 100%;
}
.auth-form .form-actions{ justify-content: stretch; }
.auth-form .form-actions .btn{ width: 100%; }

.auth-forgot{
  align-self: flex-end;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  margin-top: -2px;
  font-size: 14px;
}

.auth-register{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ap-line);
  color: var(--ap-text-muted);
  font-size: 14px;
}
.auth-register a{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.auth-links{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--ap-line);
  color: var(--ap-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.billing-card{ text-align: left; }
.billing-card h1{ font-size: 32px; }
.billing-message{ margin: 24px 0 0; }
.billing-actions{ margin-top: 20px; }
.billing-actions .btn{ flex: 1 1 0; }
.billing-account form{ margin-top: 18px; }
.billing-page{ max-width: 720px; margin-inline: auto; }
.billing-page .billing-account{
  padding: 22px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
}
.billing-cancel-action{ padding-top: 8px; border-top: 1px solid var(--ap-line); }
.btn.danger{
  border-color: var(--ap-danger);
  background: var(--ap-surface);
  color: var(--ap-danger);
}
.btn.danger:hover{
  border-color: var(--ap-danger);
  background: #FFF4F2;
  color: var(--ap-danger);
}
.footer-cancel-link{
  padding: 7px 12px;
  border: 1px solid currentColor;
  border-radius: var(--ap-radius-pill);
  text-decoration: none;
}
.billing-price{
  color: var(--ap-text);
  font-weight: 700;
}
.billing-state--active,
.billing-state--canceling,
.billing-state--trial_active{
  border-color: color-mix(in srgb, var(--ap-brand) 48%, var(--ap-line));
}
.billing-state--payment_problem{
  border-color: color-mix(in srgb, var(--ap-warning) 55%, var(--ap-line));
}
.status-actions{ justify-content: center; margin-top: 22px; }

/* Bewertungsmatrix ohne lokale Sonderfarbwelt */
.rate-row{
  display: grid;
  grid-template-columns: minmax(180px,1fr) auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--ap-line);
  border-radius: var(--ap-radius-control);
  background: var(--ap-surface-soft);
}

.rate-title{
  color: var(--ap-text-strong);
  font-weight: 700;
  line-height: 1.35;
}

.rate-matrix{
  display: grid;
  grid-template-columns: repeat(3,minmax(110px,1fr));
  gap: 6px;
}

.rate-radio{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rate-btn{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  border: 1px solid var(--ap-line-strong);
  border-radius: 10px;
  background: var(--ap-surface);
  color: var(--ap-text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
}

.rate-btn:hover{
  border-color: var(--ap-brand-strong);
  color: var(--ap-brand-strong);
}

.rate-radio:checked + .rate-btn{
  border-color: var(--ap-brand-strong);
  background: var(--ap-brand-soft);
  color: var(--ap-text-strong);
  box-shadow: none;
}

.rate-radio:focus-visible + .rate-btn{
  outline: 2px solid var(--ap-brand-hover);
  outline-offset: 3px;
}

.rate-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

@media (max-width: 1023px){
  .container{ max-width: 1023px; padding-inline: 24px; }
  h1{ font-size: 38px; }
  h2{ font-size: 29px; letter-spacing: -.01em; }
  h3{ font-size: 22px; }
  h4{ font-size: 19px; }
  .result-header{ grid-template-columns: 1fr; gap: 20px; }
  .result-actions{ justify-content: flex-start; }
  .rate-row{ grid-template-columns: 1fr; }
}

@media (max-width: 767px){
  body{ background: var(--ap-bg); }
  .container{ padding-inline: 18px; }
  .app-main{ padding-top: 20px; padding-bottom: 32px; }
  .app-header, .header-row{ min-height: 64px; }
  .header-row{ flex-direction: row; align-items: center; gap: 12px; padding-top: 0; padding-bottom: 0; }
  .app-title{ flex: 0 0 auto; margin: 0; }
  .header-actions{ min-width: 0; gap: 2px; overflow-x: auto; justify-content: flex-end; }
  .header-actions .header-link{ flex: 0 0 auto; min-height: 44px; padding: 8px 9px; font-size: 13px; }
  h1{ font-size: 32px; }
  h2{ font-size: 26px; letter-spacing: -.01em; }
  h3{ font-size: 21px; }
  h4{ font-size: 18px; }
  .card, .result-card{ padding: 18px; box-shadow: none; }
  .planning-card, .profile-card, .ratings-card, .auth-card{ padding: 18px; }
  .result-header{ display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
  .result-intro{ font-size: 16px; line-height: 1.6; }
  .result-actions, .action-group{ width: 100%; max-width: none; }
  .action-meta{ align-items: flex-start; }
  .result-done-card{ margin-bottom: 18px; padding: 13px; }
  .result-done-head{ margin-bottom: 9px; font-size: 13.5px; }
  .result-checks{ grid-template-columns: 1fr; gap: 7px; }
  .result-check{ padding: 8px 10px; font-size: 12.5px; }
  .plan-day-card{ grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px; }
  .plan-day-head{ margin-bottom: 7px; }
  .plan-day-title{ font-size: 15px; line-height: 1.5; }
  .result-change-panel{
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 18px;
    padding: 14px;
  }
  .result-change-copy{ font-size: 13.5px; }
  .tabs{
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr) minmax(0, 1.25fr);
    gap: 5px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 0;
  }
  .tab{
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow-wrap: normal;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 12.5px;
    line-height: 1.2;
    text-align: center;
  }
  .output{ min-height: 0; max-height: none; overflow: visible; padding: 16px 14px; font-size: 16px; line-height: 1.7; }
  .recipe-toolbar{ flex-direction: column; align-items: stretch; }
  .period-filter{ grid-template-columns: 1fr; }
  .period-range{ display: grid; grid-template-columns: auto 1fr; }
  .period-filter .meta-text{ grid-column: 1; }
  .subtabs{ overflow-x: auto; }
  .result-export{ padding-bottom: calc(4px + var(--safe-bottom)); }
  .result-export-actions{ grid-template-columns: 1fr; }
  .result-export-actions .btn{ width: 100%; }
  .form-actions{ align-items: stretch; }
  .form-actions .btn{ width: 100%; }
  .status-card{ margin-block: 40px; padding: 24px 18px; }
  .status-card h1{ font-size: 26px; }
  .page-header--with-actions{ display: flex; flex-direction: column; }
  .page-intro{ font-size: 16px; line-height: 1.6; }
  .form-row{ display: flex; flex-direction: column; gap: 7px; }
  .form-row > label{
    flex: none;
    padding-top: 0;
  }
  .form-row > input,
  .form-row > select,
  .form-row > textarea{
    flex: none;
    width: 100%;
  }
  .form-row > .muted, .form-row > .field-error{ width: 100%; }
  .planning-block{
    scroll-margin-top: 132px;
    padding-top: 18px;
  }
  .planning-block + .planning-block{ margin-top: 14px; }
  .planning-block-header h2{ font-size: 21px; }
  .serving-stack{ width: 100%; padding-top: 0; }
  .serving-overrides,
  .serving-help{ width: 100%; }
  .serving-day-row{
    grid-template-columns: minmax(28px, 1fr) auto minmax(62px, auto);
    gap: 8px;
  }
  .serving-stepper{ grid-template-columns: 42px 50px 42px; }
  .serving-stepper-button{ min-width: 42px; }
  .serving-value{ width: 50px !important; }
  .rate-matrix{ grid-template-columns: 1fr; }
  .rate-footer{ flex-direction: column; align-items: stretch; }
  .rate-footer .btn{ width: 100%; }
  .billing-actions, .status-actions{ flex-direction: column; align-items: stretch; }
  .billing-actions .btn, .status-actions .btn{ width: 100%; }
  .planning-intro{ align-items: stretch; flex-direction: column; gap: 12px; }
  .planning-intro-dismiss{ align-self: flex-start; }
  .auth-card{
    margin: clamp(8px, 2.5dvh, 22px) auto;
    padding: 16px 18px;
  }
  .auth-card h1{ margin-top: 3px; font-size: 28px; }
  .auth-card .page-intro{ margin-top: 5px; line-height: 1.45; }
  .auth-form{ margin-top: 10px; }
  .auth-form .form-row{ gap: 4px; padding: 5px 0; }
  .auth-form .form-actions{ margin-top: 10px; }
  .auth-register{ margin-top: 10px; padding-top: 9px; }
  .is-public .app-main{ padding-top: 8px; padding-bottom: 18px; }
}

@media (max-width: 520px){
  .plan-day-card{ grid-template-columns: 96px minmax(0, 1fr); }
  .recipe-card-list{ gap: 14px; }
  .recipe-card-head{ gap: 10px; padding: 13px 14px; }
  .recipe-card-heading h2{ font-size: 18px; }
  .recipe-card-body{ padding: 15px 14px; font-size: 15.5px; line-height: 1.65; }
}

@media (max-width: 360px), (max-height: 640px){
  .is-public .app-header,
  .is-public .header-row{ min-height: 54px; }
  .is-public .container{ padding-inline: 12px; }
  .auth-card{ margin-block: 6px; padding: 13px 15px; }
  .auth-card .eyebrow{ font-size: 11px; }
  .auth-card h1{ font-size: 26px; }
  .auth-card .page-intro{ font-size: 14px; line-height: 1.4; }
  .auth-form{ margin-top: 7px; }
  .auth-form .form-row{ padding: 3px 0; }
  .auth-form .form-actions{ margin-top: 7px; }
  .auth-register{ margin-top: 7px; padding-top: 7px; }
  .is-public .flash-messages{ margin-bottom: 4px; }
  .is-public .flash{ margin: 0; padding: 7px 10px; }
}

@media (max-width: 420px){
  .app-title{ font-size: 16px; }
  .header-actions .header-link{ padding-inline: 7px; font-size: 12.5px; }
}

@media (max-width: 767px){
  .is-authenticated .header-row{
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .is-authenticated .app-title{ align-self: flex-start; }
  .is-authenticated .header-actions{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    gap: 5px;
  }
  .is-authenticated .header-actions .header-link{
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 7px 4px;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
  }
  .is-authenticated .header-logout-form{ display: flex; min-width: 0; }
  .billing-page .billing-account{ padding: 18px; }
}

/* Rechtliche Verweise – ausschließlich globale Design-Tokens */
.app-footer{
  flex: 0 0 auto;
  margin-top: 0;
  border-top: 1px solid var(--ap-line);
  background: var(--ap-surface-soft);
  color: var(--ap-text-muted);
}

.app-footer-row{
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.app-footer small{ padding: 0; }

.app-footer-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}
.app-footer-links a{
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.app-footer a,
.privacy-note a{
  color: var(--ap-brand-strong);
  font-weight: 600;
}

.app-footer a:hover,
.privacy-note a:hover{ color: var(--ap-brand-hover); }

.privacy-note{
  margin: 12px 0 0;
  color: var(--ap-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 600px){
  .app-footer-row{
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  .app-footer-links{
    width: 100%;
    gap: 4px 16px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:active{ transform: none; }
}