/* =========================================================
   KOSMEDI 5 – components.css
   Komponenten (ohne Header & Navigation)
   ========================================================= */

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:var(--radius-md);
  font-weight:700;
  border:1px solid transparent;
  transition:.2s ease;
}

.btn--primary{
  background:var(--color-primary);
  color:var(--color-white);
}
.btn--primary:hover{
  background:var(--color-primary-dark);
}

.btn--outline{
  background:transparent;
  border-color:rgba(19,78,74,.35);
  color:var(--color-primary);
}
.btn--outline:hover{
  background:rgba(19,78,74,.08);
  color:var(--color-primary);
}

/* Card */
.card{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}

/* Hero */
.hero{
  padding:var(--space-7) 0;
  background:
    linear-gradient(rgba(19,78,74,.85), rgba(19,78,74,.85)),
    url('/files/images/hero.jpg') center/cover no-repeat;
  color:var(--color-white);
}

.hero h1{
  font-size:48px;
}

.hero p{
  font-size:20px;
  color:rgba(255,255,255,.92);
  max-width:60ch;
}