
:root{
  --bg:#F3F4F1;
  --paper:#FFFFFF;
  --paper-sunken:#EAEAE5;
  --ink:#1E2321;
  --ink-soft:#565951;
  --ink-faint:#8A8D84;
  --line:#DAD9D2;
  --accent:#5B2A42;
  --accent-ink:#FFFFFF;
  --accent-soft:#F1E4EA;
  --gruen:#3B6D11;
  --gruen-soft:#E7EFDB;
  --gelb:#A5720D;
  --gelb-soft:#F3E7D3;
  --rot:#B23A34;
  --rot-soft:#F3DEDC;
  --blau:#2E6BA3;
  --blau-soft:#DEE9F2;
  --danger:#B23A34;
  --shadow:0 1px 2px rgba(30,35,33,0.06), 0 8px 24px rgba(30,35,33,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171A17;
    --paper:#1F231F;
    --paper-sunken:#262A25;
    --ink:#EDEEE9;
    --ink-soft:#B7BAB1;
    --ink-faint:#82867C;
    --line:#33372F;
    --accent:#D98FB2;
    --accent-ink:#241119;
    --accent-soft:#3A2530;
    --gruen:#8FC562;
    --gruen-soft:#26331B;
    --gelb:#DBA84A;
    --gelb-soft:#332A16;
    --rot:#E2827B;
    --rot-soft:#3A211F;
    --blau:#7EAEDA;
    --blau-soft:#1E2C3A;
    --danger:#E2827B;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#171A17;
  --paper:#1F231F;
  --paper-sunken:#262A25;
  --ink:#EDEEE9;
  --ink-soft:#B7BAB1;
  --ink-faint:#82867C;
  --line:#33372F;
  --accent:#D98FB2;
  --accent-ink:#241119;
  --accent-soft:#3A2530;
  --gruen:#8FC562;
  --gruen-soft:#26331B;
  --gelb:#DBA84A;
  --gelb-soft:#332A16;
  --rot:#E2827B;
  --rot-soft:#3A211F;
  --blau:#7EAEDA;
  --blau-soft:#1E2C3A;
  --danger:#E2827B;
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.wrap{
  max-width:640px;
  margin:0 auto;
  padding:2.5rem 1.25rem 4rem;
}
.eyebrow{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
h1{
  font-size:26px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 4px;
  text-wrap:balance;
}
.sub{
  font-size:14.5px;
  color:var(--ink-soft);
  margin:0 0 1.4rem;
  max-width:54ch;
  line-height:1.55;
}
.stat-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--ink-soft);
  margin:0 0 1.5rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.stat-strip button{padding:7px 14px;font-size:13px;margin-left:auto;}
.progress-track{
  height:4px;background:var(--paper-sunken);border-radius:2px;overflow:hidden;margin-bottom:6px;
}
.progress-fill{height:100%;background:var(--accent);transition:width 0.25s ease;}
.progress-label{
  font-size:12.5px;color:var(--ink-faint);margin:0 0 1.5rem;
  font-variant-numeric:tabular-nums;
}
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:1.5rem 1.5rem 1.6rem;
  margin-bottom:1.25rem;
}
.call-head{
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 0.9rem;
}
.answer-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:0.9rem;
}
.answer-head .section-label{margin:0;}
button.mic{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;font-size:13px;}
button.mic svg{width:15px;height:15px;flex-shrink:0;}
button.mic.recording{background:var(--rot-soft);border-color:var(--rot);color:var(--rot);}
button:disabled{opacity:0.45;cursor:not-allowed;}
@media (prefers-reduced-motion:no-preference){
  button.mic.recording svg{animation:mic-pulse 1.4s ease-in-out infinite;}
}
@keyframes mic-pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
.transcript{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  font-size:19px;
  line-height:1.62;
  color:var(--ink);
  margin:0;
}
.transcript::before{content:"\201E";}
.transcript::after{content:"\201C";}
.section-label{
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 1rem;
}
.slider-row{
  display:grid;
  grid-template-columns:82px 1fr 30px;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.slider-row:last-of-type{margin-bottom:4px;}
.swatch-label{
  display:flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;
}
.swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.type-legend{
  display:flex;flex-direction:column;gap:7px;
  background:var(--paper-sunken);border-radius:10px;padding:12px 14px;
  margin-bottom:1.2rem;font-size:13px;color:var(--ink-soft);line-height:1.45;
}
.type-legend-row{display:flex;align-items:baseline;gap:9px;}
.type-legend-row .swatch{align-self:center;}
.type-legend-row strong{color:var(--ink);font-weight:500;}
input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  height:4px;
  border-radius:2px;
  background:var(--paper-sunken);
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--paper);
  border:2px solid var(--accent);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,0.2);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--paper);
  border:2px solid var(--accent);
  cursor:pointer;
}
.readout{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:15px;
  text-align:right;
  color:var(--ink);
}
.total-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:12px;margin-top:2px;
}
.total-row strong{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  font-weight:600;
}
textarea{
  width:100%;
  min-height:96px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper-sunken);
  color:var(--ink);
  font-family:inherit;
  font-size:15px;
  line-height:1.55;
  padding:12px 14px;
}
textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.error-msg{
  font-size:13px;color:var(--danger);margin-top:8px;display:none;
}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.1rem;}
button{
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  border-radius:10px;
  padding:11px 18px;
  cursor:pointer;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
  transition:transform 0.08s ease;
}
button:active{transform:scale(0.98);}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
button.primary{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
button.ghost{
  background:transparent;
}
a.ghost{
  display:inline-flex; align-items:center; text-decoration:none;
  font-family:inherit; font-size:14px; font-weight:500;
  border-radius:10px; padding:11px 18px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--ink);
}
a.ghost:active{transform:scale(0.98);}
.reveal{display:none;}
.reveal.show{display:block;}
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:500;
  padding:4px 11px;border-radius:100px;
  margin-bottom:1rem;
}
.tag.vorwand{background:var(--gelb-soft);color:var(--gelb);}
.tag.einwand{background:var(--blau-soft);color:var(--blau);}
.tag.type-gruen{background:var(--gruen-soft);color:var(--gruen);}
.tag.type-gelb{background:var(--gelb-soft);color:var(--gelb);}
.tag.type-rot{background:var(--rot-soft);color:var(--rot);}
.tag.type-blau{background:var(--blau-soft);color:var(--blau);}
.compare{display:flex;flex-direction:column;gap:10px;margin-bottom:1.1rem;}
.compare-row{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;}
.compare-name{font-size:13px;font-weight:500;color:var(--ink-soft);}
.compare-bars{display:flex;flex-direction:column;gap:3px;}
.bar-track{
  position:relative;height:9px;border-radius:5px;background:var(--paper-sunken);overflow:hidden;
}
.bar-fill{height:100%;border-radius:5px;}
.bar-fill.guess{opacity:0.45;}
.legend{display:flex;gap:16px;font-size:12px;color:var(--ink-faint);margin:2px 0 1.1rem;}
.legend span{display:inline-flex;align-items:center;gap:5px;}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;background:var(--ink-faint);}
.legend i.solid{opacity:1;}
.legend i.ghost{opacity:0.45;}
.beleg{
  font-size:13.5px;color:var(--ink-soft);line-height:1.6;
  background:var(--paper-sunken);border-radius:10px;padding:10px 13px;margin-bottom:1.1rem;
}
.score-box{
  background:var(--paper-sunken);border-radius:10px;padding:14px 16px;margin-bottom:1.2rem;
}
.score-box .section-label{margin-bottom:4px;}
.score-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:34px;font-weight:600;margin:0 0 10px;
}
.score-checks{list-style:none;padding:0;margin:0 0 8px;font-size:13.5px;color:var(--ink-soft);display:flex;flex-direction:column;gap:5px;}
.score-checks li{display:flex;align-items:center;gap:8px;}
.score-checks li.ok::before{content:"✓";color:var(--gruen);font-weight:600;flex-shrink:0;}
.score-checks li.no::before{content:"✗";color:var(--rot);font-weight:600;flex-shrink:0;}
.muster{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  font-size:16.5px;line-height:1.6;color:var(--ink);
  border-left:2px solid var(--accent);
  padding-left:14px;margin:0 0 1.1rem;
}
.copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.copy-hint{font-size:12.5px;color:var(--ink-faint);}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:1.3rem;}
.metric-card{background:var(--paper-sunken);border-radius:10px;padding:14px 16px;}
.metric-label{font-size:12px;color:var(--ink-faint);margin:0 0 4px;}
.metric-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
  font-size:22px;font-weight:600;margin:0;color:var(--ink);
}
.table-scroll{overflow-x:auto;margin-bottom:1.3rem;}
.results-table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px;}
.results-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.04em;
  color:var(--ink-faint);font-weight:500;padding:0 10px 8px 0;border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.results-table td{
  padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-soft);
}
.results-table td.excerpt{color:var(--ink);max-width:220px;}
.results-table td.num{font-variant-numeric:tabular-nums;}
.hit-yes{color:var(--gruen);font-weight:600;}
.hit-no{color:var(--rot);font-weight:600;}
.feed-count{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;color:var(--ink-faint);text-transform:none;letter-spacing:0;
}
.feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.feed-empty{color:var(--ink-faint);font-size:13.5px;padding:4px 0;}
.feed-item{
  background:var(--paper-sunken);border-radius:10px;padding:12px 14px;
}
.feed-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.feed-name{font-weight:500;font-size:13.5px;color:var(--ink);}
.feed-time{font-size:12px;color:var(--ink-faint);font-variant-numeric:tabular-nums;}
.feed-objection{
  font-family:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 6px;font-style:italic;
}
.feed-answer{font-size:14px;color:var(--ink);line-height:1.55;margin:0 0 8px;}
.feed-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft);}
footer{
  text-align:center;font-size:12px;color:var(--ink-faint);margin-top:2rem;
}

/* Login-Seite */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem;
}
.login-card{width:100%; max-width:360px;}
.login-card h1{font-size:22px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; font-weight:500; color:var(--ink-soft); margin-bottom:6px;}
.field input{
  width:100%; height:40px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper-sunken); color:var(--ink); padding:0 12px;
  font-family:inherit; font-size:15px;
}
.field input:focus{outline:2px solid var(--accent); outline-offset:1px;}
button.full{width:100%; justify-content:center; display:flex;}

/* Header mit Nutzer-Info, auf app.html und report.html */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:1.5rem; padding-bottom:1.2rem; border-bottom:1px solid var(--line);
  font-size:13px; color:var(--ink-soft);
}
.topbar .who{font-weight:500; color:var(--ink);}
.topbar a, .topbar button.ghost{font-size:13px; padding:7px 12px;}

/* Tool-Auswahl */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:1.5rem;}
.tool-card{
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.2rem; cursor:pointer; text-align:left; font-family:inherit;
}
.tool-card:hover{border-color:var(--accent);}
.tool-card .tool-emoji{font-size:22px; margin-bottom:8px; display:block;}
.tool-card .tool-name{font-weight:500; font-size:15px; color:var(--ink); margin:0 0 3px;}
.tool-card .tool-desc{font-size:12.5px; color:var(--ink-faint); margin:0;}

/* Report-Seite */
.filter-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.3rem;}
.filter-pill{
  font-family:inherit; font-size:13px; font-weight:500; padding:8px 14px;
  border-radius:100px; border:1px solid var(--line); background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.filter-pill.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.user-row{
  display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.user-row:last-child{border-bottom:none;}
.role-badge{
  font-size:11px; font-weight:500; padding:3px 9px; border-radius:100px;
  background:var(--accent-soft); color:var(--accent); text-transform:uppercase; letter-spacing:0.03em;
}
