/* ==========================================================================
   BEZIEHUNGSTEST — STYLE
   Token-System:
   Farben:
     --paper   #FBF8F4  warmes Off-White (Hintergrund)
     --ink     #2A2420  warmes Fast-Schwarz (Text)
     --wein    #7C3B4A  Bordeaux — Person A
     --tanne   #2E5C58  Tannengrün — Person B
     --sand    #DCD2C4  helles Taupe — leeres Herz / Rahmen
     --sienna  #B5482A  Terrakotta — Hinweis auf Diskrepanzen
   Typografie:
     Display: "Fraunces" (variable, warm, humanistisch)
     Body/UI: "Work Sans"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --paper:#FBF8F4;
  --paper-deep:#F3EDE3;
  --ink:#2A2420;
  --ink-soft:#6b6058;
  --wein:#7C3B4A;
  --wein-soft:#e8d3d7;
  --tanne:#2E5C58;
  --tanne-soft:#d6e3e0;
  --sand:#DCD2C4;
  --sienna:#B5482A;
  --radius:14px;
}

*{box-sizing:border-box;}

body.bzt{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.bzt-wrap{
  max-width:640px;
  margin:0 auto;
  padding:2.5rem 1.5rem 5rem;
}

.bzt-backlink{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  width:fit-content;
  margin:1.5rem auto 0;
  padding:.65rem 1.4rem;
  border:1px solid var(--sand);
  border-radius:999px;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:.9rem;
  color:var(--ink);
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.bzt-backlink:hover{ border-color:var(--wein); color:var(--wein); transform:translateY(-1px); }
.bzt-backlink:focus-visible{ outline:3px solid var(--wein); outline-offset:2px; }

.bzt h1, .bzt h2, .bzt h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  margin:0 0 .5rem;
  letter-spacing:-0.01em;
}

.bzt h1{ font-size:2rem; font-optical-sizing:auto; }
.bzt h2{ font-size:1.5rem; }
.bzt p{ margin:0 0 1rem; color:var(--ink); }
.bzt .lead{ color:var(--ink-soft); font-size:1.02rem; }

/* ---------- Intro-Screen ---------- */
.bzt-intro-card{
  background:var(--paper-deep);
  border-radius:var(--radius);
  padding:1.75rem;
  margin:1.5rem 0;
}
.bzt-names{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:1.25rem 0;
}
.bzt-field label{
  display:block;
  font-size:.82rem;
  color:var(--ink-soft);
  margin-bottom:.35rem;
}
.bzt-field input,
.bzt-field select{
  width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--sand);
  border-radius:8px;
  font-family:'Work Sans', sans-serif;
  font-size:1rem;
  background:var(--paper);
  color:var(--ink);
}
.bzt-field input:focus,
.bzt-field select:focus{ outline:2px solid var(--wein); outline-offset:1px; }

.bzt-scale-legend{
  display:flex;
  justify-content:space-between;
  font-size:.82rem;
  color:var(--ink-soft);
  margin-top:.25rem;
}

/* ---------- Buttons ---------- */
.bzt-btn{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:1rem;
  padding:.8rem 1.6rem;
  border-radius:999px;
  border:none;
  cursor:pointer;
  background:var(--ink);
  color:var(--paper);
  transition:transform .15s ease, background .15s ease;
}
.bzt-btn:hover{ transform:translateY(-1px); }
.bzt-btn:active{ transform:translateY(0); }
.bzt-btn:focus-visible{ outline:3px solid var(--wein); outline-offset:2px; }
.bzt-btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--sand);
}

/* ---------- Fortschritt ---------- */
.bzt-progress-wrap{
  position:sticky; top:0;
  background:var(--paper);
  padding:1rem 0 .75rem;
  z-index:5;
}
.bzt-progress-track{
  height:6px;
  border-radius:999px;
  background:var(--sand);
  overflow:hidden;
}
.bzt-progress-fill{
  height:100%;
  background:var(--current-color, var(--wein));
  transition:width .3s ease;
}
.bzt-progress-label{
  display:flex;
  justify-content:space-between;
  font-size:.8rem;
  color:var(--ink-soft);
  margin-top:.5rem;
}
.bzt-person-tag{
  font-weight:600;
  color:var(--current-color, var(--wein));
}

/* ---------- Fragen ---------- */
.bzt-bereich-label{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-soft);
  margin-bottom:.4rem;
}
.bzt-question{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  font-weight:500;
  margin:.25rem 0 1.4rem;
  min-height:3.2em;
}
.bzt-scale{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:.5rem;
  margin-bottom:.5rem;
}
.bzt-scale button{
  aspect-ratio:1;
  border-radius:10px;
  border:1.5px solid var(--sand);
  background:var(--paper);
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
  cursor:pointer;
  transition:all .12s ease;
}
.bzt-scale button:hover{ border-color:var(--current-color, var(--wein)); }
.bzt-scale button:focus-visible{ outline:3px solid var(--current-color, var(--wein)); outline-offset:2px; }
.bzt-scale button.selected{
  background:var(--current-color, var(--wein));
  border-color:var(--current-color, var(--wein));
  color:var(--paper);
}

.bzt-nav{
  display:flex;
  justify-content:space-between;
  margin-top:1.75rem;
}

/* ---------- Übergabe-Screen ---------- */
.bzt-handoff{
  text-align:center;
  padding:3rem 1rem;
}
.bzt-handoff .bzt-icon{
  font-size:2.4rem;
  margin-bottom:1rem;
}

/* ---------- Ergebnis ---------- */
.bzt-results h1{ margin-bottom:.25rem; }
.bzt-bereich-result{
  background:var(--paper-deep);
  border-radius:var(--radius);
  padding:1.5rem;
  margin:1.25rem 0;
}
.bzt-bereich-result h3{ margin-bottom:1rem; }

.bzt-hearts-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.bzt-heart-block{
  text-align:center;
}
.bzt-heart-name{
  font-weight:600;
  font-size:.92rem;
  margin-bottom:.4rem;
}
.bzt-heart-block.persona .bzt-heart-name{ color:var(--wein); }
.bzt-heart-block.personb .bzt-heart-name{ color:var(--tanne); }

.bzt-heart-svg{ width:120px; height:110px; }
.bzt-heart-score{
  font-family:'Fraunces', serif;
  font-size:1.15rem;
  font-weight:600;
  margin-top:.35rem;
}
.bzt-heart-score span{
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  font-size:.85rem;
  color:var(--ink-soft);
}

.bzt-divergenz{
  background:#fbf1ec;
  border:1px solid #ecd2c4;
  border-radius:var(--radius);
  padding:1.5rem;
  margin-top:2rem;
}
.bzt-divergenz h3{ color:var(--sienna); }
.bzt-divergenz ul{ list-style:none; margin:1rem 0 0; padding:0; }
.bzt-divergenz li{
  padding:.85rem 0;
  border-top:1px solid #ecd2c4;
}
.bzt-divergenz li:first-child{ border-top:none; }
.bzt-div-q{ font-family:'Fraunces', serif; font-size:1.05rem; margin-bottom:.35rem; }
.bzt-div-scores{
  display:flex; gap:1.25rem;
  font-size:.88rem;
}
.bzt-div-scores b{ font-weight:600; }
.bzt-div-scores .a{ color:var(--wein); }
.bzt-div-scores .b{ color:var(--tanne); }
.bzt-div-diff{ color:var(--sienna); font-weight:600; }

.bzt-no-divergenz{
  text-align:center;
  color:var(--ink-soft);
  padding:1rem 0;
}

.bzt-full-list{
  margin-top:2.5rem;
}
.bzt-full-list h2{
  font-size:1.3rem;
  margin-bottom:.25rem;
}
.bzt-answer-group{
  margin-top:1.5rem;
  break-inside:avoid;
}
.bzt-answer-group h3{
  font-size:1.02rem;
  color:var(--ink-soft);
  margin-bottom:.5rem;
}
.bzt-answer-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.bzt-answer-table th,
.bzt-answer-table td{
  padding:.5rem .6rem;
  border-bottom:1px solid var(--sand);
  text-align:left;
}
.bzt-answer-table th{
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  color:var(--ink-soft);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.bzt-answer-table th:nth-child(2){ color:var(--wein); }
.bzt-answer-table th:nth-child(3){ color:var(--tanne); }
.bzt-answer-table td.num{
  text-align:center;
  font-weight:600;
  width:3.5rem;
}

.bzt-restart{ text-align:center; margin-top:2.5rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.bzt-print-header{ display:none; }
.bzt-print-only{ display:none; }

.bzt-notes{
  margin-top:2.5rem;
}
.bzt-note-block{
  margin-bottom:1.5rem;
}
.bzt-note-label{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1rem;
  display:block;
  margin-bottom:.5rem;
}
.bzt-note-question{
  font-size:.88rem;
  color:var(--ink-soft);
  margin:0 0 .3rem;
}
.bzt-note-lines-group{
  margin-bottom:1rem;
}
.bzt-note-line{
  height:.75cm;
  border-bottom:1px solid var(--sand);
}

@media print{
  .bzt-backlink,
  .bzt-restart{ display:none !important; }

  .bzt-print-header{
    display:block;
    font-family:'Work Sans', sans-serif;
    font-size:.85rem;
    color:var(--ink-soft);
    border-bottom:1px solid var(--sand);
    padding-bottom:.5rem;
    margin-bottom:1.25rem;
  }
  .bzt-print-header span{ display:block; margin-top:.15rem; color:var(--ink); font-weight:600; }

  .bzt-print-only{ display:block; }

  body.bzt{ background:#fff; }
  .bzt-wrap{ max-width:100%; padding:0; }
  .bzt-lead, .lead{ color:#000; }
  .bzt-bereich-result{
    background:#fff;
    border:1px solid var(--sand);
    break-inside:avoid;
  }
  .bzt-divergenz{ break-inside:avoid; }
  .bzt-answer-group{ break-inside:avoid; }
  .bzt-heart-svg path{ print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}

.bzt-hint{
  font-size:.82rem;
  color:var(--ink-soft);
  background:var(--paper-deep);
  border-radius:10px;
  padding:.9rem 1.1rem;
  margin-top:1.25rem;
}

@media (max-width:420px){
  .bzt-hearts-row{ gap:.5rem; }
  .bzt-heart-svg{ width:96px; height:88px; }
  .bzt-scale{ gap:.35rem; }
}

@media (prefers-reduced-motion: reduce){
  .bzt-btn, .bzt-scale button, .bzt-progress-fill{ transition:none; }
}