/* Sex‑O‑Mat – helle Beta‑Optik (Gelb) */
:root{
  --bg:#fffbea;
  --card:#ffffff;
  --text:#16181b;
  --muted:#5b6270;
  --line:#ece8d5;
  --acc:#f4b400;
  --shadow:0 8px 26px rgba(0,0,0,.08);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial}
a{color:#0b57d0;text-decoration:none}
.wrap{max-width:880px;margin:32px auto;padding:0 16px}
.foot{margin:20px 0 36px}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo-img{width:70px;height:auto;background:transparent;object-fit:contain;margin-right:8px}
h1{font-size:28px;margin:0}
.sub{color:var(--muted)}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card--soft{background:linear-gradient(180deg,#fffdf2, #ffffff)}

.progress{height:10px;background:#f6f2dd;border-radius:999px;overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}
.bar{height:100%;background:linear-gradient(90deg,#f4b400,#ff9100);width:0%;transition:width .25s ease}

.qtext{font-size:20px;margin:6px 0 14px;word-wrap:break-word}
.likert{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.likert button{flex:1;min-width:64px;max-width:120px;padding:12px;border-radius:12px;border:1px solid var(--line);background:#fff7cf;color:#16181b;cursor:pointer}
.likert button:hover{border-color:#f4b400}
.likert button.active{background:#ffe28a;border-color:#f4b400}
@media (max-width:560px){
  .likert{gap:8px}
  .likert button{flex:1 1 calc(20% - 8px);min-width:0}
}

.btn{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:#16181b;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;line-height:1.1;font-weight:600}
.btn:hover{filter:brightness(0.98)}
.btn.primary{background:#f4b400;border-color:#e3a900}
.btn.primary:hover{filter:brightness(1.02)}
.btn.secondary{background:#fff7cf}
.btn:disabled{opacity:.6;cursor:not-allowed}

.cta-row{display:flex;gap:10px;padding-top:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.cta--stack{display:flex;padding-top:10px;gap:12px;flex-wrap:wrap}
.cta--stack .btn{flex:1 1 260px}

.badge{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.swatch{width:15px;height:50px;border-radius:14px;border:2px solid rgba(0,0,0,.08)}
.btitle{font-size:22px;margin:0}

.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.row.wrap{flex-wrap:wrap}
.pill{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#fff7cf;color:#3e3e3e}

.note{font-size:13px;padding-top:10px;color:var(--muted)}
.hr{height:1px;background:#ece8d5;margin:16px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:720px){ .grid2{grid-template-columns:1fr} }

.colors{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 24px}
.footer-links{display:flex;gap:14px;flex-wrap:wrap}
.footer-links a{color:#666}
.footer-links a:hover{color:#f4b400;text-decoration:underline}

.card, .card p, .card a { overflow-wrap:anywhere; word-break:break-word; } /* prevent overflow in legal pages */
.k{background:#fff7cf;border:1px solid var(--line);border-radius:8px;padding:3px 6px}

/* ---------- Mobile-Optimierungen ---------- */
h1{ font-size: clamp(22px, 4.5vw, 32px); }
.sub{ font-size: clamp(13px, 2.8vw, 16px); }
.qtext{ font-size: clamp(18px, 3.8vw, 20px); }
.btn{ font-size: clamp(15px, 3.6vw, 16px); }

/* Farben-Liste: bessere Lesbarkeit + Reihenfolge */
.colors > div{
  display:flex; align-items:center; gap:8px;
  line-height:1.35;
}

@media (max-width: 720px){
  .wrap{ margin:20px auto; padding:0 12px; }
  .card{ padding:16px; }
  .topbar{ gap:12px; }

  /* Logo + Headline kompakter nebeneinander */
  .logo-img{ width:72px; }
}

@media (max-width: 560px){
  /* Farben in eine Spalte, sauberer Fluss */
  .colors{
    display:grid;
    grid-template-columns: 1fr;   /* 1 Spalte */
    gap:10px;
    margin:8px 0 20px;
  }

  /* CTA-Buttons untereinander, volle Breite, gleiche Höhe */
  .cta--stack{ gap:10px; }
  .cta--stack .btn{
    flex:1 1 100%;
    width:100%;
    min-height:44px;              /* Fingerfreundlich */
  }

  /* Header kompakter, Button nicht so breit */
  .topbar{ align-items:flex-start; }
  #startInfoBtn{ padding:10px 12px; }

  /* Quiz-Bedienelemente luftiger */
  .likert{ gap:8px; }
  .likert button{
    flex:1 1 calc(50% - 8px);     /* 2 pro Zeile, dann umbrechen */
    max-width:none;
    padding:12px;
  }

  /* Ergebnis-Badge untereinander statt nebeneinander */
  .badge{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Sehr kleine Geräte (iPhone SE, 320–360px) */
@media (max-width: 380px){
  .logo-img{ width:60px; }
  h1{ font-size: 22px; }
  .sub{ font-size: 13px; }
  .likert button{ flex:1 1 100%; } /* ein Button pro Zeile */
}

/* ---- Likert 1–5: auf Handy immer in einer Reihe ---- */
@media (max-width: 560px){
  .likert{
    display: grid;                         /* statt flex */
    grid-template-columns: repeat(5, 1fr); /* 5 gleich breite Spalten */
    gap: 8px;
  }
  .likert button{
    min-width: 0;          /* Überschreibt alte min/max-Widths */
    max-width: none;
    padding: 10px 6px;     /* kompakter, damit 5 reinpassen */
    font-size: 16px;
    line-height: 1.1;
    border-radius: 10px;
  }
}

/* sehr kleine Geräte (≤380px) etwas kompakter */
@media (max-width: 380px){
  .likert button{
    padding: 9px 4px;
    font-size: 14px;
  }
}

/* ---------- Ergebnis-Karte ---------- */
#result .badge {
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 12px;
}

#result .btitle { font-size: 26px; margin-bottom: 4px; }
#result .sub { font-size: 16px; }

#result .pill {
  background: #fffbea;
  border-color: #f0e4a5;
  font-size: 15px;
  padding: 6px 12px;
}

#result .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
#result .grid2 .row.wrap {
  flex-wrap: wrap;
  gap: 10px;
}
#result code.k {
  background: #fffbea;
  display: inline-block;
  padding: 5px 8px;
  border-radius: 6px;
}

/* ---------- Mobiloptimierung ---------- */
@media (max-width: 720px){
  #result .grid2 {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #result .badge {
    flex-direction: column;
    align-items: flex-start;
  }
  #result .pill {
    font-size: 14px;
    padding: 6px 10px;
  }
  #result code.k {
    word-break: break-all;
    white-space: normal;
    font-size: 14px;
  }
  #result .row.wrap button {
    flex: 1 1 100%;
  }
  #result .row.wrap {
    flex-direction: column;
  }
  #badgeCanvas {
    width: 100% !important;
    height: auto !important;
    margin-top: 10px;
  }
}

/* ---------- Zusatz: etwas mehr Luft unten ---------- */
#result {
  margin-bottom: 24px;
}


/* Overlay für Kurzcode */
#shortcodeOverlay{
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); padding: 16px;
}
#shortcodeOverlay.open{ display: flex; }
#shortcodeOverlay[hidden]{ display: none !important; }
#shortcodeOverlay .overlay-card{
  background: #ffffff; color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow);
  max-width: min(560px, 92vw); width: 100%;
  padding: 18px;
}
#shortcodeOverlay .overlay-actions .btn{ margin-right: 8px; }


/* Profil-Balken */
.bars{ display:grid; gap:12px; }
.barRow{ display:grid; grid-template-columns: 96px 1fr; gap:10px; align-items:center; }
.barLabel{ font-weight:600; color: var(--text); font-size: 14px; }
.barTrack{ height:10px; background:#f6f2dd; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.barFill{ height:100%; border-radius:999px; }

/* Learn more as link */
a.learnmore{ color:#0b57d0; text-decoration:underline; font-weight:500; }
a.learnmore:hover{ color: var(--acc); text-decoration:none; }

@media (max-width:720px){
  .barRow{ grid-template-columns: 86px 1fr; }
}