/* ═══════════════════════════════════════════════════
   components.css — UI-Komponenten
   ManokiSolution
   ═══════════════════════════════════════════════════ */

/* ── BUTTONS ──────────────────────────────────────── */
.btn {
  display:        inline-block;
  padding:        14px 36px;
  font-family:    var(--font-body);
  font-size:      var(--fs-tiny);
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius:  var(--radius-sm);
  cursor:         pointer;
  transition:     all var(--ease);
  border:         none;
  line-height:    1;
}
.btn-primary {
  background: var(--color-green);
  color:      var(--color-cream);
  border:     1px solid var(--color-green);
}
.btn-primary:hover {
  background:   var(--color-gold);
  border-color: var(--color-gold);
  color: #fff;
}
.btn-outline {
  background:   transparent;
  color:        var(--color-green);
  border:       1px solid var(--color-green);
}
.btn-outline:hover {
  background: var(--color-green);
  color:      var(--color-cream);
}
.btn-ghost {
  background:   transparent;
  color:        var(--color-cream);
  border:       1px solid rgba(245,242,236,.5);
}
.btn-ghost:hover {
  border-color: var(--color-gold);
  color:        var(--color-gold);
}
/* Weißer Rahmen-Button für grüne Hintergründe */
.btn-white-outline {
  background:   transparent;
  color:        var(--color-cream);
  border:       1px solid rgba(245,242,236,.7);
}
.btn-white-outline:hover {
  background:   rgba(245,242,236,.1);
  border-color: var(--color-cream);
}
.btn-gold {
  background:   var(--color-gold);
  color:        #fff;
  border:       1px solid var(--color-gold);
}
.btn-gold:hover { background: #b8934f; border-color: #b8934f; }

/* ── FORMS ────────────────────────────────────────── */
.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.form-group label {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          rgba(245,242,236,.45);
}
.form-group label.dark {
  color: var(--color-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
  background:    rgba(245,242,236,.07);
  border:        1px solid var(--color-gold-border);
  border-radius: var(--radius-sm);
  padding:       13px 18px;
  color:         var(--color-cream);
  font-family:   var(--font-body);
  font-size:     var(--fs-small);
  outline:       none;
  transition:    border-color var(--ease);
  -webkit-appearance: none;
  appearance:    none;
}
.form-group input.light,
.form-group textarea.light,
.form-group select.light {
  background: rgba(31,58,51,.04);
  border-color: var(--color-border);
  color: var(--color-grey);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(245,242,236,.25); }
.form-group input.light::placeholder,
.form-group textarea.light::placeholder { color: var(--color-muted); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--color-gold); }
.form-group textarea { height: 120px; resize: vertical; }
.form-group select option { background: var(--color-green); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Checkbox */
.checkbox-group {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  cursor:      pointer;
}
.checkbox-group input[type="checkbox"] {
  width:         18px;
  height:        18px;
  flex-shrink:   0;
  margin-top:    2px;
  cursor:        pointer;
  accent-color:  var(--color-gold);
  padding:       0;
  background:    transparent;
  border:        1px solid var(--color-gold-border);
}
.checkbox-label {
  font-size:   var(--fs-tiny);
  color:       rgba(245,242,236,.55);
  line-height: 1.6;
}
.checkbox-label.dark { color: var(--color-muted); }

/* Honeypot */
.hp-field { display: none !important; }

/* Form status messages */
.form-success {
  text-align:    center;
  padding:       52px 32px;
  border:        1px solid var(--color-gold-border);
  border-radius: var(--radius-md);
  background:    rgba(201,168,106,.06);
}
.form-success-icon {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      var(--color-gold);
  color:           #fff;
  font-size:       1.4rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 18px;
}
.form-success-title {
  font-family:  var(--font-heading);
  font-size:    1.6rem;
  color:        var(--color-cream);
  margin-bottom: 10px;
}
.form-success-text { font-size: var(--fs-small); color: rgba(245,242,236,.5); line-height: 1.7; }
.form-error-msg {
  padding:       13px 18px;
  border:        1px solid rgba(239,68,68,.35);
  background:    rgba(239,68,68,.08);
  border-radius: var(--radius-sm);
  font-size:     var(--fs-small);
  color:         rgba(245,242,236,.8);
  margin-bottom: 16px;
}

/* ── COOKIE BANNER ────────────────────────────────── */
.cookie-banner {
  position:      fixed;
  bottom:        24px;
  left:          24px;
  right:         24px;
  z-index:       var(--z-cookie);
  max-width:     700px;
  margin:        0 auto;
  background:    var(--color-grey);
  border:        1px solid var(--color-gold-border);
  border-radius: var(--radius-md);
  padding:       22px 28px;
  box-shadow:    var(--shadow-lg);
  display:       none; /* JS zeigt ihn */
}
.cookie-inner {
  display:     flex;
  align-items: center;
  gap:         28px;
  flex-wrap:   wrap;
}
.cookie-text {
  font-size:   var(--fs-tiny);
  color:       rgba(245,242,236,.75);
  line-height: 1.65;
  flex:        1;
  min-width:   200px;
}
.cookie-text strong { color: var(--color-cream); display: block; margin-bottom: 3px; }
.cookie-text a      { color: var(--color-gold); }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn-cookie-decline {
  padding:        9px 18px;
  font-family:    var(--font-body);
  font-size:      10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  background:     transparent;
  border:         1px solid rgba(245,242,236,.2);
  border-radius:  var(--radius-sm);
  color:          rgba(245,242,236,.5);
  cursor:         pointer;
  transition:     all var(--ease);
}
.btn-cookie-decline:hover { border-color: rgba(245,242,236,.5); color: var(--color-cream); }
.btn-cookie-accept {
  padding:        9px 18px;
  font-family:    var(--font-body);
  font-size:      10px;
  font-weight:    500;
  letter-spacing: .1em;
  text-transform: uppercase;
  background:     var(--color-gold);
  border:         1px solid var(--color-gold);
  border-radius:  var(--radius-sm);
  color:          #fff;
  cursor:         pointer;
  transition:     all var(--ease);
}
.btn-cookie-accept:hover { background: #b8934f; border-color: #b8934f; }

/* ── TESTIMONIAL CARDS ────────────────────────────── */
.testimonial-card {
  background:    rgba(245,242,236,.05);
  border:        1px solid rgba(201,168,106,.15);
  border-radius: var(--radius-md);
  padding:       36px 30px;
  transition:    background var(--ease);
}
.testimonial-card:hover { background: rgba(245,242,236,.08); }
.testimonial-quote {
  font-family:  var(--font-heading);
  font-size:    1.1rem;
  font-weight:  400;
  color:        rgba(245,242,236,.85);
  line-height:  1.65;
  margin-bottom: 14px;
}
.testimonial-body {
  font-size:    var(--fs-small);
  color:        rgba(245,242,236,.65);
  line-height:  1.75;
  margin-bottom: 24px;
}
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.author-avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  background:      rgba(201,168,106,.25);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-heading);
  font-size:       1rem;
  color:           var(--color-cream);
  flex-shrink:     0;
}
.author-name { font-size: var(--fs-small); font-weight: 500; color: var(--color-cream); }
.author-role { font-size: var(--fs-tiny); color: rgba(245,242,236,.4); margin-top: 2px; }
.stars       { color: var(--color-gold); font-size: .7rem; letter-spacing: 2px; margin-bottom: 14px; }