/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  color:#1a1a1a;
  background:#fafafa;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* === Header === */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}
.logo{
  font-size:1.25rem;
  font-weight:700;
  color:#1a1a1a;
  text-decoration:none;
  letter-spacing:-0.02em;
}
.logo-highlight{color:#d97706}
.site-header nav{display:flex;gap:1.5rem}
.site-header nav a{
  font-size:0.85rem;
  color:#6b7280;
  text-decoration:none;
}
.site-header nav a:hover{color:#1a1a1a}

/* === Footer === */
.site-footer{
  text-align:center;
  padding:2rem 1rem;
  font-size:0.8rem;
  color:#9ca3af;
  margin-top:auto;
}

/* === Main Container === */
.main-container{
  max-width:760px;
  margin:0 auto;
  padding:2rem 1.25rem 4rem;
}

/* === Hero === */
.hero{text-align:center}
.hero-title{
  font-size:2.5rem;
  font-weight:800;
  letter-spacing:-0.03em;
  margin-bottom:0.75rem;
}
.hero-title .highlight{color:#d97706}
.hero-sub{
  font-size:1.1rem;
  color:#6b7280;
  margin-bottom:2.5rem;
  line-height:1.7;
}

/* === Paste Zone === */
.paste-zone{
  border:2px dashed #d1d5db;
  border-radius:12px;
  padding:3rem 2rem;
  cursor:pointer;
  transition:border-color .15s,border-style .15s,background .15s;
  outline:none;
  background:#fff;
}
.paste-zone:hover,.paste-zone:focus{border-color:#d97706;background:#fffbeb}
.paste-zone.uploading{border-style:solid;border-color:#d97706;background:#fffbeb}
.paste-icon{
  font-size:2rem;
  color:#d1d5db;
  margin-bottom:0.75rem;
}
.paste-zone p{color:#6b7280;font-size:0.95rem}
.paste-zone p span{font-size:0.8rem;color:#9ca3af}

/* === Divider === */
.divider{
  display:flex;
  align-items:center;
  margin:2rem 0;
  color:#9ca3af;
  font-size:0.85rem;
}
.divider::before,.divider::after{
  content:"";
  flex:1;
  border-bottom:1px solid #e5e7eb;
}
.divider span{padding:0 1rem}

/* === Input Groups === */
.input-group{margin-bottom:1.25rem;text-align:left}
.input-group label,.email-group label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  color:#374151;
  margin-bottom:0.4rem;
}
textarea{
  width:100%;
  padding:0.85rem 1rem;
  border:1px solid #d1d5db;
  border-radius:8px;
  font:inherit;
  font-size:0.95rem;
  line-height:1.55;
  resize:vertical;
  background:#fff;
  transition:border-color .15s;
}
textarea:focus{outline:none;border-color:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.1)}
.char-count{display:block;text-align:right;font-size:0.75rem;color:#9ca3af;margin-top:0.25rem}
.char-count.warn{color:#d97706}

/* === Email === */
.email-group{margin:1.5rem 0;text-align:left}
.email-row{display:flex;gap:0.5rem}
.email-row input{
  flex:1;
  padding:0.7rem 0.9rem;
  border:1px solid #d1d5db;
  border-radius:8px;
  font:inherit;
  font-size:0.95rem;
  background:#fff;
}
.email-row input:focus{outline:none;border-color:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.1)}
.email-msg{font-size:0.82rem;color:#059669;margin-top:0.35rem}

/* === Buttons === */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.75rem 2rem;
  border:none;
  border-radius:8px;
  font:inherit;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn-primary{background:#1a1a1a;color:#fff}
.btn-primary:hover:not(:disabled){background:#2d2d2d}
.btn-secondary{background:#f3f4f6;color:#1a1a1a}
.btn-secondary:hover:not(:disabled){background:#e5e7eb}
.btn-small{font-size:0.85rem;padding:0.5rem 1.25rem}
.analyze-hint{font-size:0.82rem;color:#9ca3af;margin-top:0.5rem}

/* === Warnings === */
.warnings{margin:1rem 0}
.warning{
  background:#fef3c7;
  border:1px solid #f59e0b;
  padding:0.6rem 1rem;
  border-radius:6px;
  font-size:0.85rem;
  color:#92400e;
  margin-bottom:0.5rem;
}

/* === Credits bar === */
.credits-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.5rem;
  padding:0.75rem 1rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  font-size:0.9rem;
  color:#374151;
}

/* === Loading === */
.loading{
  text-align:center;
  padding:4rem 2rem;
}
.spinner{
  width:40px;
  height:40px;
  margin:0 auto 1rem;
  border:3px solid #e5e7eb;
  border-top-color:#d97706;
  border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading p{color:#6b7280}
#loading-status{color:#d97706}

/* === Results === */
.results{padding-top:1rem}
.verdict-badge{
  text-align:center;
  margin-bottom:2rem;
  font-size:1.1rem;
  font-weight:600;
}
.verdict-badge.zuverlassig{color:#059669}
.verdict-badge.teilweise-zuverlassig{color:#d97706}
.verdict-badge.fragwurdig{color:#dc2626}
.verdict-badge.unzuverlassig{color:#dc2626}

/* === Cards Grid === */
.cards-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  margin-bottom:2rem;
}
.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:1.25rem;
}
.card h3{
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:0.75rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.card-icon{font-size:1.2rem}
.card-body{font-size:0.9rem;line-height:1.7;color:#374151}
.card-body p{margin-bottom:0.75rem}
.card-body ol,.card-body ul{padding-left:1.25rem;margin-bottom:0.75rem}
.card-body li{margin-bottom:0.35rem}
.card-arbiter{grid-column:1/-1;border-left:3px solid #d97706}

.card-advocatus{border-left:3px solid #dc2626}
.card-auditor{border-left:3px solid #2563eb}
.card-sokrates{border-left:3px solid #7c3aed}

/* === Share === */
.share-section{
  text-align:center;
  margin-bottom:1.5rem;
}
.share-title{
  font-size:0.85rem;
  color:#9ca3af;
  margin-bottom:0.5rem;
}
.share-buttons{
  display:flex;
  justify-content:center;
  gap:0.5rem;
  flex-wrap:wrap;
}
.share-btn{
  padding:0.45rem 1rem;
  border:none;
  border-radius:6px;
  font-size:0.8rem;
  font-weight:600;
  cursor:pointer;
  color:#fff;
  transition:opacity .15s;
}
.share-btn:hover{opacity:.85}
.share-whatsapp{background:#25D366}
.share-telegram{background:#0088cc}
.share-x{background:#1a1a1a}
.share-facebook{background:#1877F2}
.share-email{background:#6b7280}

/* === AI Disclaimer === */
.ai-disclaimer{
  text-align:center;
  font-size:0.8rem;
  color:#9ca3af;
  margin-bottom:1.5rem;
  padding:0.75rem;
  background:#f9fafb;
  border-radius:6px;
}

/* === Legal pages === */
.legal-page{max-width:720px;margin:0 auto;padding:2rem 1.25rem}
.legal-page h1{font-size:1.6rem;margin-bottom:1.5rem}
.legal-page h2{font-size:1.2rem;margin-top:2rem;margin-bottom:0.75rem}
.legal-page h3{font-size:1rem;margin-top:1.5rem;margin-bottom:0.5rem}
.legal-page p,.legal-page li{margin:0.5rem 0;line-height:1.7}
.legal-page ul{padding-left:1.5rem}
.legal-page a{color:#2563eb}
.legal-page table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.92rem}
.legal-page th,.legal-page td{padding:0.5rem;border:1px solid #d1d5db;text-align:left}
.legal-page thead tr{background:#f3f4f6}

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

/* === Responsive === */
@media(max-width:640px){
  .hero-title{font-size:2rem}
  .site-header{flex-direction:column;gap:0.5rem;padding:1rem}
  .site-header nav{gap:1rem}
  .cards-grid{grid-template-columns:1fr}
  .card-arbiter{grid-column:1}
}