@tailwind base;
@tailwind components;
@tailwind utilities;

html { scroll-behavior:smooth; }

/* -------------------------------------------------- */
/* Grundlayout                                       */
/* -------------------------------------------------- */

body{
  @apply font-sans antialiased text-dark bg-beige-0;   /* zurück zum hellen Beige */
}

/* Ganzflächiger Seiten-Verlauf (helles Beige → leicht dunkler) */
.bg-page{
  background: linear-gradient(
    to bottom,
    #f4f1ec 0%,
    #f0ece6 40%,
    #e7e0d7 90%
  );
}

/* -------------------------------------------------- */
/* Buttons                                            */
/* -------------------------------------------------- */

.btn-primary{
  @apply inline-block px-6 py-3 rounded font-semibold bg-accent2 hover:bg-accent text-dark transition;
}
.btn-outline{
  @apply inline-block px-6 py-3 rounded font-semibold border-2 border-accent2 hover:bg-accent/30 transition;
}

/* -------------------------------------------------- */
/* Hero                                               */
/* -------------------------------------------------- */

.hero-overlay{
  @apply absolute inset-0 bg-gradient-to-b from-black/70 via-black/40 to-transparent;
}

/* weicher Abschluss unter Hero */
.hero-fade-bottom{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(244,241,236,0) 0%,
    #f4f1ec 40%,
    #f4f1ec 100%);
}

/* -------------------------------------------------- */
/* Section-Fade (unter jedem Header-Gradient)         */
/* -------------------------------------------------- */

/* weicher Übergang Header → Seiten-Hintergrund       */
.section-fade-bottom{
    content:"";
    position:absolute;
    inset-x-0 bottom-0;
    height:80px;
    pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(240,236,230,0) 0%,
      #f0ece6 70%,
      #f0ece6 100%);
  }

/* -------------------------------------------------- */
/* Header-Verläufe                                    */
/* -------------------------------------------------- */


/* Alias für Header-Komponente */
.header-gradient{
    background: linear-gradient(
      to bottom,
      #ece7df 0%,
      #e5ded4 40%,
      rgba(236,231,223,0) 100%   /* → unten völlig transparent! */
    );
    backdrop-filter: blur(6px);
  }

/* -------------------------------------------------- */
/* Farben                                             */
/* -------------------------------------------------- */

.text-dark   { color:#1e1e1e; }
.text-white  { color:#ffffff; }