/* === Helvetic Logic — Swiss Design System === */
:root {
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface2: #f3f4f5;
  --border: #e5e7eb;
  --text: #191c1d;
  --text2: #4c4546;
  --muted: #7e7576;
  --black: #000000;
  --amber: #f59e0b;
  --amber-dark: #855300;
  --red: #ba1a1a;
  --green: #059669;
  --max-width: 852px;
}

/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(14px, 1.1vw, 16px);-webkit-text-size-adjust:100%}
body{
  font-family: 'DM Sans', sans-serif;
  line-height:1.5;
  color:var(--text);
  background:var(--bg);
  height:100dvh;
  display:flex;
  flex-direction:column;
}
main{flex:1;min-height:0;overflow-y:auto}

/* === Label Caps (system-wide) === */
label, .label-caps {
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

/* === Logo === */
.logo{
  font-family: 'DM Sans', sans-serif;
  font-size:clamp(1rem, 1.5vw, 1.25rem);
  font-weight:800;
  color:var(--text);
  text-decoration:none;
  letter-spacing:-0.02em;
}
.logo-highlight{color:var(--amber-dark)}

/* === Footer === */
.site-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(1rem, 2vw, 2rem);
  padding:clamp(8px, 1vw, 12px) clamp(16px, 2.5vw, 32px);
  font-size:clamp(10px, 0.8vw, 12px);
  color:var(--muted);
  border-top:1px solid var(--border);
  flex-wrap:wrap;
  text-transform:uppercase;
  letter-spacing:0.05em;
  flex-shrink:0;
}
.site-footer nav{display:flex;gap:clamp(1rem, 2vw, 2rem)}
.site-footer nav a{
  font-size:clamp(10px, 0.8vw, 12px);
  color:var(--text2);
  text-decoration:none;
  font-weight:500;
}
.site-footer nav a:hover{color:var(--black)}
.footer-copy{color:var(--muted);white-space:nowrap}

/* === Main Container === */
.main-container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:clamp(12px, 1.5vw, 20px) clamp(16px, 2vw, 24px) clamp(12px, 1.5vw, 20px);
}

/* === Hero === */
.hero{text-align:left}
.hero-title{
  font-family: 'DM Sans', sans-serif;
  font-size:clamp(24px, 4.5vw, 60px);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.15;
  margin-bottom:clamp(4px, 0.5vw, 8px);
  color:var(--black);
  }
.hero-title .highlight{color:var(--amber-dark)}
.hero-sub{
  font-family: 'DM Sans', sans-serif;
  font-size:clamp(14px, 1.3vw, 18px);
  color:var(--text2);
  margin-bottom:clamp(32px, 4vw, 52px);
  line-height:1.6;
  font-weight:400;
}

/* === Analysis Section === */
.analysis-section{
  padding: 0;
}

/* === Input Groups === */
.input-group{margin-bottom:clamp(10px, 1.2vw, 16px);text-align:left}
.input-group label{
  display:block;
  margin-bottom:clamp(8px, 1vw, 12px);
}
.input-wrap{
  border:1px solid var(--border);
  background:var(--surface2);
  padding:clamp(8px, 1vw, 14px);
  transition:border-color .15s;
}
.input-wrap:focus-within{border-color:var(--black)}
textarea{
  width:100%;
  padding:0;
  border:none;
  font:inherit;
  font-size:clamp(14px, 1.1vw, 16px);
  line-height:1.5;
  resize:none;
  background:transparent;
  color:var(--text);
}
textarea:focus{outline:none}
textarea::placeholder{color:var(--muted)}
textarea{min-height:calc(1.5 * 4 * 1em)}

/* === Divider === */
.divider{
  display:flex;
  align-items:center;
  margin:clamp(10px, 1.2vw, 16px) 0;
  color:var(--muted);
  font-size:clamp(10px, 0.8vw, 12px);
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  border-bottom:1px solid var(--border);
}
.divider span{padding:0 clamp(8px, 1vw, 16px)}

/* === Action Row (screenshot + email 2-col) === */
.action-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, 2vw, 24px);
  margin-bottom:0;
}

/* === Paste Zone === */
.paste-zone{
  display:flex;
  flex-direction:column;
  text-align:left;
}
.paste-zone label{
  display:block;
  margin-bottom:clamp(8px, 1vw, 12px);
}
.paste-area{
  flex:1;
  min-height:clamp(100px, 10vw, 150px);
  border:1px solid var(--border);
  background:var(--surface2);
  cursor:pointer;
  transition:border-color .15s,background .15s;
  outline:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(12px, 1.5vw, 24px);
}
.paste-area:hover,.paste-area:focus,.paste-zone.uploading .paste-area{
  border-color:var(--black);
  background:var(--surface);
}
.paste-icon{
  font-size:clamp(24px, 3vw, 40px);
  color:var(--muted);
  margin-bottom:clamp(4px, 0.5vw, 8px);
}
.paste-area p{
  color:var(--text2);
  font-size:clamp(9px, 0.7vw, 11px);
  font-weight:500;
  letter-spacing:0.05em;
  text-transform:uppercase;
}

/* === Email Action === */
.email-action{
  display:flex;
  flex-direction:column;
  text-align:left;
}
.email-action label{
  display:block;
  margin-bottom:clamp(8px, 1vw, 12px);
}
.email-wrap{
  border:1px solid var(--border);
  background:var(--surface2);
  padding:clamp(10px, 1vw, 14px) clamp(12px, 1.2vw, 16px);
}
.email-wrap input{
  width:100%;
  border:none;
  font:inherit;
  font-size:clamp(14px, 1.1vw, 16px);
  background:transparent;
  color:var(--text);
}
.email-wrap input:focus{outline:none}
.email-wrap input::placeholder{color:var(--muted)}
.email-msg{font-size:clamp(10px, 0.8vw, 12px);color:var(--green);margin-top:clamp(4px, 0.5vw, 8px);margin-bottom:clamp(8px, 1vw, 12px);letter-spacing:0.05em}
.email-msg a{color:inherit;text-underline-offset:2px}

.email-action .btn{flex:1;width:100%;margin-top:0}
.email-action.is-authed{padding-top:0}
.email-display-wrap{
  display:flex;
  align-items:center;
  gap:clamp(4px, 0.5vw, 8px);
}
.email-display-btn{
  font-size:clamp(14px, 1.1vw, 16px);
  color:var(--text);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  font-family:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
.email-display-btn:hover{color:var(--amber-dark)}
.email-icon-btn{
  visibility:hidden;
  opacity:0;
  width:clamp(28px, 2.5vw, 36px);
  height:clamp(28px, 2.5vw, 36px);
  align-items:center;
  justify-content:center;
  background:var(--surface2);
  border:1px solid var(--border);
  font-size:clamp(14px, 1.2vw, 18px);
  color:var(--text2);
  cursor:pointer;
  line-height:1;
  padding:0;
  transition:opacity .15s, visibility .15s, background .15s, color .15s, border-color .15s;
  flex-shrink:0;
}
.email-icon-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.email-display-wrap:hover .email-icon-btn{visibility:visible;opacity:1}

/* === Buttons === */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:clamp(10px, 1vw, 14px) clamp(20px, 2.5vw, 32px);
  border:none;
  font:inherit;
  font-size:clamp(10px, 0.8vw, 12px);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:opacity .15s,background .15s;
}
.btn:disabled{opacity:.25;cursor:not-allowed}
.btn-primary{background:var(--black);color:#fff}
.btn-primary:hover:not(:disabled){background:#333}
.btn-secondary{background:transparent;color:var(--black);border:1px solid var(--black)}
.btn-secondary:hover:not(:disabled){background:var(--black);color:#fff}
.btn-small{font-size:clamp(9px, 0.7vw, 11px);padding:clamp(6px, 0.6vw, 8px) clamp(10px, 1vw, 16px)}
.analyze-hint{font-size:clamp(10px, 0.8vw, 12px);color:var(--muted);margin-top:clamp(4px, 0.5vw, 8px);text-transform:uppercase;letter-spacing:0.05em}

/* === Warnings === */
.warnings{margin:clamp(8px, 1vw, 16px) 0}
.warning{
  background:var(--surface);
  border:1px solid var(--border);
  padding:clamp(8px, 1vw, 12px) clamp(12px, 1.2vw, 16px);
  font-size:clamp(12px, 1vw, 14px);
  color:var(--text);
  margin-bottom:clamp(4px, 0.5vw, 8px);
}

/* === Credits bar === */
.credits-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(8px, 1vw, 16px);
  margin-top:clamp(6px, 0.8vw, 10px);
  padding:clamp(6px, 0.8vw, 10px) clamp(10px, 1vw, 14px);
  background:var(--surface);
  border:1px solid var(--border);
  font-size:clamp(10px, 0.8vw, 12px);
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--text2);
}

/* === Loading === */
.loading{
  text-align:left;
  padding:clamp(32px, 5vw, 64px) clamp(16px, 2vw, 24px);
}
.spinner{
  width:clamp(20px, 2.5vw, 32px);
  height:clamp(20px, 2.5vw, 32px);
  margin:0 0 clamp(8px, 1vw, 16px);
  border:2px solid var(--border);
  border-top-color:var(--black);
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{color:var(--text2);font-size:clamp(14px, 1.1vw, 16px)}
#loading-status{color:var(--black);font-weight:500}

/* === Results === */
.results{padding-top:clamp(4px, 0.5vw, 8px)}
.verdict-badge{
  text-align:left;
  margin-bottom:clamp(16px, 2.5vw, 32px);
  font-size:clamp(20px, 2.5vw, 32px);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.2;
  padding-bottom:clamp(16px, 2vw, 24px);
  border-bottom:1px solid var(--border);
}
.verdict-badge.zuverlassig{color:var(--green)}
.verdict-badge.teilweise-zuverlassig{color:var(--amber-dark)}
.verdict-badge.fragwurdig{color:var(--red)}
.verdict-badge.unzuverlassig{color:var(--red)}
.verdict-pct{display:block}
.verdict-charakter{display:block;font-size:clamp(14px, 1.8vw, 20px);font-weight:400;color:var(--text2);margin-top:4px}

/* === Cards Grid === */
.cards-grid{
  display:grid;
  gap:clamp(16px, 2vw, 24px);
  margin-bottom:clamp(16px, 2.5vw, 32px);
}
.cards-details{
  grid-template-columns:1fr 1fr 1fr;
}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  padding:clamp(16px, 1.8vw, 24px);
}
.card h3{
  font-size:clamp(10px, 0.8vw, 12px);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  margin-bottom:clamp(10px, 1.2vw, 16px);
  display:flex;
  align-items:center;
  gap:clamp(4px, 0.5vw, 8px);
  color:var(--text);
}
.card-icon{font-size:clamp(14px, 1.2vw, 16px)}
.card-body{
  font-size:clamp(14px, 1.1vw, 16px);
  line-height:1.6;
  color:var(--text);
}
.card-body p{margin-bottom:clamp(8px, 1vw, 12px)}
.card-body ol,.card-body ul{padding-left:clamp(16px, 1.5vw, 20px);margin-bottom:clamp(8px, 1vw, 12px)}
.card-body li{margin-bottom:clamp(4px, 0.5vw, 6px)}
.card-body strong{color:var(--black);font-weight:600}

.card-arbiter{
  border-left:4px solid var(--black);
  background:var(--surface2);
}
.card-arbiter .card-body{font-size:clamp(15px, 1.3vw, 18px);line-height:1.6}
.card-arbiter .card-body strong{font-weight:700}

.card-intent-gap{
  border-left:4px solid var(--black);
  background:var(--surface2);
  margin-bottom:clamp(16px, 2vw, 24px);
}
.card-intent-gap .card-body{font-size:clamp(15px, 1.3vw, 18px);line-height:1.6}
.card-intent-gap .card-body strong{font-weight:700}

.card-advocatus{border-left:4px solid var(--amber)}
.card-analyst{border-left:4px solid #22c55e}
.card-sokrates{border-left:4px solid #7c3aed}

.verdict-intent{display:block;font-size:clamp(12px, 1.2vw, 15px);font-weight:500;color:var(--text2);margin-top:4px}

/* === Details Toggle === */
.details-toggle{
  display:none;
  width:100%;
  padding:clamp(8px, 1vw, 12px) clamp(12px, 1.2vw, 16px);
  margin-bottom:clamp(16px, 2vw, 24px);
  border:1px solid var(--black);
  background:var(--surface);
  font:inherit;
  font-size:clamp(10px, 0.8vw, 12px);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--black);
  cursor:pointer;
  text-align:left;
}
.details-toggle:hover{background:var(--black);color:#fff}

/* === New Analysis Button === */
.new-analysis-wrap{margin-top:clamp(4px, 0.5vw, 8px)}

/* === Share === */
.share-section{margin-bottom:clamp(16px, 2vw, 24px)}
.share-title{
  font-size:clamp(10px, 0.8vw, 12px);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:clamp(4px, 0.5vw, 8px);
}
.share-buttons{display:flex;gap:clamp(4px, 0.6vw, 8px);flex-wrap:wrap}
.share-btn{
  padding:clamp(6px, 0.6vw, 8px) clamp(10px, 1.2vw, 16px);
  border:1px solid var(--border);
  font-size:clamp(9px, 0.7vw, 11px);
  font-weight:500;
  letter-spacing:0.05em;
  cursor:pointer;
  background:var(--surface);
  color:var(--text);
  transition:border-color .15s,background .15s;
}
.share-btn:hover{border-color:var(--black);background:var(--black);color:#fff}

/* === AI Disclaimer === */
.ai-disclaimer{
  font-size:clamp(10px, 0.8vw, 12px);
  color:var(--muted);
  margin-bottom:clamp(16px, 2vw, 24px);
  padding:clamp(8px, 1vw, 12px) clamp(12px, 1.2vw, 16px);
  background:var(--surface2);
  border:1px solid var(--border);
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* === Legal pages === */
.legal-page{max-width:720px;margin:0 auto;padding:clamp(24px, 3.5vw, 48px) clamp(16px, 2vw, 24px)}
.legal-page h1{font-size:clamp(22px, 2.5vw, 32px);font-weight:700;margin-bottom:clamp(16px, 2vw, 24px);letter-spacing:-0.02em}
.legal-page h2{font-size:clamp(14px, 1.3vw, 18px);font-weight:600;margin-top:clamp(20px, 2.5vw, 32px);margin-bottom:clamp(10px, 1.2vw, 16px)}
.legal-page h3{font-size:clamp(13px, 1.1vw, 16px);font-weight:600;margin-top:clamp(16px, 2vw, 24px);margin-bottom:clamp(4px, 0.5vw, 8px)}
.legal-page p,.legal-page li{margin:clamp(4px, 0.6vw, 8px) 0;line-height:1.6}
.legal-page ul{padding-left:clamp(16px, 1.8vw, 24px)}
.legal-page a{color:var(--black);text-decoration:underline}
.legal-page table{width:100%;border-collapse:collapse;margin:clamp(8px, 1.2vw, 16px) 0;font-size:clamp(12px, 1vw, 14px)}
.legal-page th,.legal-page td{padding:clamp(4px, 0.6vw, 8px) clamp(8px, 1vw, 12px);border:1px solid var(--border);text-align:left}
.legal-page thead tr{background:var(--surface2)}

/* === Hidden === */
.hidden{display:none !important}

/* === Responsive === */
@media(max-width:768px){
  .hero-title{font-size:clamp(18px, 7vw, 30px);letter-spacing:-0.02em;line-height:1.15}
  .main-container{padding:clamp(16px, 4vw, 24px) clamp(12px, 3vw, 16px) clamp(24px, 6vw, 48px)}
  .analysis-section{border-left:none;padding-left:0}
  .site-footer{flex-direction:column;gap:12px;text-align:left}
  .site-footer nav{gap:16px}
  .action-row{grid-template-columns:1fr}
  .cards-details{grid-template-columns:1fr}
  .details-toggle{display:block}
}