/* Geschmackstest und "Für dich" (27.09.2026), siehe static/js/taste_profile.js.
   Nur Theme-Variablen, damit es in allen 3 Designs passt. */

/* Test: zwei grosse Bildkacheln pro Frage */
.tp-test h2{margin:.1rem 0 .9rem;}
.tp-progress{margin:0; font-size:.85rem; color:var(--ink-muted);}
.tp-lead{margin-bottom:.6rem;}
.tp-tiles{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.75rem;}
.tp-tile{
  display:flex; flex-direction:column; align-items:stretch; gap:.5rem; padding:.5rem .5rem .75rem;
  font:inherit; color:var(--ink); background:var(--bg);
  border:1.5px solid var(--border); border-radius:16px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.tp-tile img, .tp-tile-noimg{
  width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:11px; background:var(--surface-hover);
}
.tp-tile-noimg{display:flex; align-items:center; justify-content:center; font-size:2.5rem;}
.tp-tile strong{font-size:1.15rem; text-align:center;}
.tp-tile:hover:not(:disabled){border-color:var(--accent); background:var(--accent-soft);}
.tp-tile:focus-visible, .tp-switch-btn:focus-visible, .tp-link:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.tp-tile:disabled{opacity:.6; cursor:wait;}
.tp-more{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.8rem;}
.tp-link{
  background:none; border:0; padding:.35rem .2rem; font:inherit; font-size:.9rem;
  color:var(--accent); text-decoration:underline; cursor:pointer; min-height:2.25rem;
}

/* Startpaket fuers Kochbuch */
.tp-starter{display:grid; gap:.6rem; margin:.4rem 0 .6rem;}
.tp-starter[hidden]{display:none;}
.tp-starter h3{margin:0; font-size:1.05rem;}
.tp-starter-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5rem;}
.tp-starter-item{
  position:relative; display:flex; flex-direction:column; gap:.3rem; padding:.35rem;
  border:1.5px solid var(--border); border-radius:12px; background:var(--bg); cursor:pointer; font-size:.85rem; line-height:1.25;
}
.tp-starter-item img{width:100%; aspect-ratio:4 / 3; object-fit:cover; border-radius:8px;}
.tp-starter-item input{position:absolute; top:.55rem; left:.55rem; width:1.25rem; height:1.25rem; accent-color:var(--accent);}
.tp-starter-item:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.tp-starter-item:focus-within{outline:2px solid var(--accent); outline-offset:2px;}
.tp-starter-done{margin:0; font-weight:600;}

/* Fenster zum Wiederholen */
.tp-scrim{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:1rem; background:rgba(0,0,0,.45);
}
.tp-card{
  position:relative; width:min(34rem, 100%); max-height:calc(100dvh - 2rem); overflow:auto; box-sizing:border-box;
  padding:1.25rem; border-radius:18px; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.tp-close{
  position:absolute; top:.6rem; right:.6rem; width:2.5rem; height:2.5rem; border-radius:50%;
  font-size:1.3rem; color:var(--ink); background:var(--bg); border:1px solid var(--border); cursor:pointer;
}
.tp-actions{display:flex; justify-content:flex-end; margin-top:1rem;}
.tp-actions[hidden]{display:none;}

/* Inspiration: Umschalter "Für dich | Alle Gerichte" */
.tp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:0 0 1rem;}
.tp-switch{display:inline-flex; padding:.2rem; gap:.2rem; border-radius:99px; background:var(--surface-hover); border:1px solid var(--border);}
.tp-switch-btn{
  display:inline-flex; align-items:center; gap:.4rem; min-height:2.5rem; padding:.35rem 1rem;
  font:inherit; font-weight:600; color:var(--ink); background:transparent; border:0; border-radius:99px; cursor:pointer;
}
.tp-switch-btn.active{background:var(--accent); color:var(--accent-ink);}
.tp-switch-btn:disabled{opacity:.55; cursor:default;}
.tp-count{font-size:.8rem; font-weight:500; opacity:.8;}
.tp-hint{margin:0; flex-basis:100%; font-size:.85rem; color:var(--ink-muted);}
.tp-invite{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; width:100%; box-sizing:border-box;
  padding:.85rem 1rem; border-radius:14px; background:var(--accent-soft); border:1px solid var(--border);
}
.tp-invite p{margin:0; flex:1 1 16rem;}
.tp-invite .hicon{width:1.6rem; height:1.6rem; flex:none;}

@media (max-width:600px){
  .tp-tiles{gap:.5rem;}
  .tp-starter-grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .tp-tile strong{font-size:1rem;}
  .tp-switch{width:100%;}
  .tp-switch-btn{flex:1; justify-content:center; padding:.35rem .5rem;}
}