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


h1, h2 {
  @apply font-header;
  @apply tracking-wide;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
@font-face {
 font-family: 'Poppins';
 src: url(/assets/Poppins-Regular-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf),
      url(/assets/Poppins-Bold-542ca15de37ab3bcf41f3ee5fdb9a8a4ba3346a27998196101a9a01a0f4ce0d8.ttf);
 font-display: swap;
}
@font-face {
 font-family: 'Lobster';
 src: url(/assets/Lobster-Regular-26493143db1f169607f55fdb7f7538bfbce4566bb056b6507da7d2818240bdb5.ttf);
 font-display: swap;
}
@font-face {
 font-family: 'Bangers';
 src: url(/assets/Bangers-Regular-2a04302e22e2e03c4f70e931de92dca4629de762f608c0fb4974aed29390e4a3.ttf);
 font-display: swap;
}
/* Landingpage: Muster, Schatten und Animationen, die sich mit Tailwind-Klassen schlecht ausdrücken lassen */

.lp-dots {
  background-color: #FFF7EA;
  background-image: radial-gradient(#E6D7BC 1.6px, transparent 1.7px);
  background-size: 24px 24px;
}

.lp-dots-pink {
  background-color: #FFE6F1;
  background-image: radial-gradient(#FFC2DC 1.6px, transparent 1.7px);
  background-size: 24px 24px;
}

.lp-checker {
  background-color: #F1E8FF;
  background-image: conic-gradient(#E6D8FF 25%, transparent 0 50%, #E6D8FF 0 75%, transparent 0);
  background-size: 56px 56px;
}

.lp-hero-dots {
  background: radial-gradient(rgba(255, 247, 234, .09) 1.4px, transparent 1.5px) 0 0 / 24px 24px;
}

/* Desktop: Bild rechts neben der Textspalte, blendet über eine Maske stufenlos in den Hintergrund aus */
@media (min-width: 1024px) {
  .lp-hero-media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .04) 6%, rgba(0, 0, 0, .14) 13%, rgba(0, 0, 0, .3) 20%,
      rgba(0, 0, 0, .5) 28%, rgba(0, 0, 0, .7) 36%, rgba(0, 0, 0, .86) 44%, rgba(0, 0, 0, .96) 52%, #000 60%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .04) 6%, rgba(0, 0, 0, .14) 13%, rgba(0, 0, 0, .3) 20%,
      rgba(0, 0, 0, .5) 28%, rgba(0, 0, 0, .7) 36%, rgba(0, 0, 0, .86) 44%, rgba(0, 0, 0, .96) 52%, #000 60%);
  }
}

.lp-hero-fade {
  background: linear-gradient(180deg, #2A0B3F 0%, rgba(42, 11, 63, .7) 45%, rgba(42, 11, 63, 0) 100%);
}

.lp-highlight {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.lp-step-number {
  -webkit-text-stroke: 2px #2A0B3F;
  text-shadow: 4px 4px 0 #2A0B3F;
}

.lp-blink {
  animation: lp-blink 1.1s steps(1) infinite;
}

@keyframes lp-blink {
  50% { opacity: .15; }
}

.lp-marquee-track {
  display: flex;
  width: max-content;
  animation: lp-marquee 38s linear infinite;
}

@keyframes lp-marquee {
  to { transform: translateX(-50%); }
}

.lp-faq summary {
  list-style: none;
  cursor: pointer;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

.lp-faq .lp-plus {
  transition: transform .2s ease;
}

.lp-faq details[open] .lp-plus {
  transform: rotate(45deg);
}

.lp-menu summary {
  list-style: none;
}

.lp-menu summary::-webkit-details-marker {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track,
  .lp-blink {
    animation: none;
  }

  .lp-faq .lp-plus {
    transition: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */