/* ============================================================
   LILAKOALA — Theme Override
   Einbinden NACH main.min.css:
   <link href="css/lilakoala-theme.css" rel="stylesheet">
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT — Nunito (rund, kindgerecht, ersetzt Archivo)
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ------------------------------------------------------------
   2. CSS VARIABLEN — ABX-Werte überschreiben
   Original: --accent:#F1B84B  --black:#000000
   ------------------------------------------------------------ */
:root {
  --accent:       #5685f4;   /* Blau aus Logo */
  --accent-hover: #3a6be0;   /* Dunkleres Blau für Hover */
  --coral:        #ea6254;   /* Coral aus Logo */
  --black:        #010101;   /* Schwarz aus Logo */
  --bg-tint:      #f5f5f5;   /* Helles Grau *"/
}

/* ------------------------------------------------------------
   3. BASIS — Body, Font, Hintergrund
   ------------------------------------------------------------ */
body {
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg-tint);
  background-image: none;
}

/* ------------------------------------------------------------
   4. HEADER
   Original: background #fff, border-bottom #bababa
   ------------------------------------------------------------ */
.header {
  background: var(--bg-tint) !important;
  border-bottom: 2px solid #e0e0e0 !important;
}

.navbar-brand {
  color: var(--black) !important;
  font-weight: 900;
}

.nav-link::before {
  background-color: var(--accent) !important;
}

.menu_toggle span {
  background: var(--accent) !important;
}

/* ------------------------------------------------------------
   5. BUTTONS
   Original: --accent #F1B84B (gelb), hover #212122 (schwarz)
   ------------------------------------------------------------ */
.btn--accent,
.btn.btn--accent:hover {
  background: #5685f4 !important;
  border-color: #5685f4 !important;
  color: #fff !important;
}

.btn--accent:hover,
.btn--hover-black:focus,
.btn.btn--accent.btn--hover-black:hover {
  background: #3a6be0 !important;
  border-color: #3a6be0 !important;
  color: #fff !important;
}

.btn {
  border-radius: 50px !important;
}

/* ------------------------------------------------------------
   6. HERO
   Original: Text weiß auf Video-Overlay
   ------------------------------------------------------------ */
.hero-title {
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -2px;
}

/* ------------------------------------------------------------
   7. FEATURES / ABOUT SECTION
   Original: weißer Hintergrund, schwarze Outlines
   ------------------------------------------------------------ */
.features {
  background-color: #fff;
}

.features_main-title.outlined.outlined--black,
.outlined--black {
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
  color: var(--accent);
}

/* ------------------------------------------------------------
   8. SEPARATOR
   Original: dunkler Text auf hellem Grund
   ------------------------------------------------------------ */
.separator {
  background-color: transparent;
  padding: 40px 0;
  margin: 0 !important;
}

.separator .title {
  color: #010101 !important;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
}

/* ------------------------------------------------------------
   9. SERVICE CARDS (Buch-Cards)
   Original: weiße Cover-Karte, schwarze Border, dunkles Overlay
   ------------------------------------------------------------ */
.services_list-item .cover {
  border: 3px solid var(--accent) !important;
  background-color: #fff !important;
  border-radius: 12px;
}

.services_list-item .cover_title {
  color: var(--black) !important;
  font-weight: 900;
}

/* Overlay beim Hover: dunkelviolett statt schwarz */
.services_list-item .content_bg-overlay {
  background: rgba(1, 1, 1, 0.82) !important;
}

/* Cover-Bild selbst als Karte-Preview (kein graues Placeholder) */
.services_list-item .cover_shape img {
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 160px;
}

/* Titel & Text in der aufgeklappten Karte */
.services_list-item .content_main-title {
  color: #fff !important;
  font-size: 28px;
  font-weight: 900;
}

.services_list-item .content_main-text {
  color: #e8effe !important;
}

/* Kust-Border-Variante (mittlere Card): lila statt schwarz */
.services_list-item.cust-br .cover {
  border-left: none !important;
  border-right: none !important;
}

/* ------------------------------------------------------------
   10. CTA SECTION (Music Library)
   Original: background #212122 (schwarz)
   ------------------------------------------------------------ */
.cta-sec {
  background-color: #ea6254 !important;
}

/* Altes ABX shape-img ausblenden — hat opacity:0.24 in main.min.css */
.cta_bg-shape {
  opacity: 0 !important;
}

.right-touched-pad {
  position: relative;
  z-index: 2;
}

.cta-box .cta-content {
  color: #fff !important;
}

.text-yellow {
  color: #f1ff38 !important;
}

/* ------------------------------------------------------------
   11. NWT / GET IN TOUCH SECTION
   Original: background #212122 (schwarz)
   ------------------------------------------------------------ */
.nwt-sec {
  background: linear-gradient(135deg, #010101 0%, #1a2a5e 100%) !important;
  color: #e8effe !important;
}

.nwt-sec .about_slogan-title,
.nwt-sec .about_slogan-title h2 {
  color: #fff !important;
}

.nwt-sec .about_slogan-text {
  color: #c8d8fc !important;
}

/* Outlined Text in NWT */
.outlined--white {
  -webkit-text-stroke: 2px #fff !important;
  text-stroke: 2px #fff !important;
  color: transparent !important;
}

/* ------------------------------------------------------------
   12. DIVIDER LINE
   Original: background #212122
   ------------------------------------------------------------ */
.divider-line {
  background: var(--accent) !important;
}

/* ------------------------------------------------------------
   13. DROPDOWN MENU
   Original: border #212122, hover background #212122
   ------------------------------------------------------------ */
.dropdown-menu {
  border: 2px solid var(--accent) !important;
}

.dropdown-item {
  border-bottom: 2px solid #e0e0e0 !important;
}

.dropdown-item.active,
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   14. FOOTER
   Original: font-size 12px, flex space-between
   ------------------------------------------------------------ */
.footer {
  background-color: #f5f5f5 !important;
  color: #010101 !important;
}

.footer a,
.f-links a {
  color: #010101 !important;
}

.footer a:hover,
.f-links a:hover {
  color: #5685f4 !important;
}

/* ------------------------------------------------------------
   15. RESPONSIVE ANPASSUNGEN
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  .hero-title {
    font-size: 60px;
  }

  .header {
    background: var(--bg-tint) !important;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 42px;
  }
}
.ymal-img-box {
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}

.ymal-img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transform: none !important;
}

.ymal-img-box a:hover img {
  transform: none !important;
}

/* ------------------------------------------------------------
   16. PRINT RECIPE BUTTON
   Kleiner, abgerundeter Outline-Button in CI-Blau
   Nutzung: <a href="#" class="print-link-btn">REZEPT DRUCKEN</a>
   ------------------------------------------------------------ */
.print-link-btn {
  display: inline-block;
  padding: 6px 18px;
  border: 2px solid var(--accent) !important;
  border-radius: 30px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none !important;
  color: var(--accent) !important;
  background: transparent !important;
  transition: background 0.2s ease, color 0.2s ease;
}

.print-link-btn:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   17. CUSTOM CURSOR — z-index über CookieConsent
   ------------------------------------------------------------ */
.custom-cursor {
  z-index: 2147483647 !important;
}