/*
  LIBYOU Base Theme CSS
  – Ergänzt Bootstrap 5.3 (nach Bootstrap einbinden)
  – Einheitlicher Dark‑Look, Komponenten & Utilities
  – Passt zu allen Seiten: Home, ROSE, BLUE, GOLD, About, Mix, Legal
*/

/* =============================
   Design Tokens (CSS‑Variablen)
   ============================= */

@font-face {
  font-family: 'LIBYOU';
  src: url('../fonts/Text_AvenirLTProLight.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'LIBYOU';
  src: url('../fonts/Headline_RealHeadProSemilight.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}


:root {
  /* Neutrals */
  --ly-bg: #0c0c10;           /* Seitenhintergrund */
  --ly-surface: #11131a;      /* Karten / Flächen */
  --ly-text: #e6e9ef;         /* Primärtext */
  --ly-muted: #9aa3b2;        /* Sekundärtext */
  --ly-border: rgba(255,255,255,.08);

  /* Brand Accents */
  --ly-rose: #e84e9a;
  --ly-rose-2: #ff9ecd;
  --ly-blue: #5aa6ff;
  --ly-blue-2: #bcd9ff;
  --ly-gold: #e5c165;
  --ly-gold-2: #fff1ce;

  /* States */
  --ly-success: #45d39c;
  --ly-shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* Bootstrap 5.3 Dark Context */
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(232,78,154,.15), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(90,166,255,.15), transparent 55%),
    radial-gradient(900px 600px at 110% 80%, rgba(229,193,101,.12), transparent 60%),
    var(--ly-bg);
  color: var(--ly-text);
  font-feature-settings: "liga" 1, "kern" 1;
}

/* =============================
   Header / Navigation
   ============================= */
.navbar {
  backdrop-filter: saturate(140%) blur(10px);
  background: linear-gradient(180deg, rgba(16,17,24,.85) 0%, rgba(16,17,24,.6) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar .navbar-brand span { letter-spacing: .5px; font-weight: 800; color: var(--ly-text);}
.navbar.shadow-sm { box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.nav-link{color: #9aa3b2 !important}

/* =============================
   Hero
   ============================= */
.hero { padding-top: 8rem; padding-bottom: 5rem; position: relative; }
.hero h1 { font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.hero-sub { color: var(--ly-muted); max-width: 58ch; }
.hero-can { filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); animation: ly-float 6s ease-in-out infinite; max-height: 520px; }
@keyframes ly-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* Bunte, weiche Hintergrundwolken (optional) */
.blur-bg { position: absolute; inset: -10%; z-index: -1; pointer-events: none; filter: blur(40px);
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(232,78,154,.15) 0%, rgba(232,78,154,0) 60%),
    radial-gradient(40% 40% at 80% 20%, rgba(90,166,255,.15) 0%, rgba(90,166,255,0) 60%),
    radial-gradient(35% 35% at 20% 80%, rgba(229,193,101,.12) 0%, rgba(229,193,101,0) 60%);
}

/* =============================
   Cards / Surfaces
   ============================= */
.card-ly {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--ly-border);
  box-shadow: var(--ly-shadow);
  border-radius: 18px;
  transition: transform .2s ease;
}
.card-ly:hover { transform: translateY(-3px); }
.shadow-ring { box-shadow: 0 0 0 1px var(--ly-border) inset; }

/* =============================
   Buttons
   ============================= */
.btn-gradient { border: 0; color: #0a0b0f; font-weight: 700; box-shadow: 0 8px 30px rgba(232,78,154,.25), 0 2px 10px rgba(90,166,255,.15); }
.btn-gradient:hover { filter: brightness(1.02); transform: translateY(-1px); }

/* Generische Verläufe */
.btn-gradient { background: var(--ly-muted)}
.btn-rose    { background: linear-gradient(135deg, var(--ly-rose) 0%, var(--ly-rose-2) 100%); }
.btn-blue    { background: linear-gradient(135deg, var(--ly-blue) 0%, var(--ly-blue-2) 100%); }
.btn-gold    { background: linear-gradient(135deg, var(--ly-gold) 0%, var(--ly-gold-2) 100%); }

/* =============================
   Badges / Chips / Meta
   ============================= */
.meta-badges .badge { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.chip { font-size: .85rem; padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.chip-rose { background: rgba(232,78,154,.12); color: #ffd8ea; border-color: rgba(232,78,154,.35); }
.chip-blue { background: rgba(90,166,255,.12);  color: #d7e9ff; border-color: rgba(90,166,255,.35); }
.chip-gold { background: rgba(229,193,101,.12); color: #fff1ce; border-color: rgba(229,193,101,.35); }

.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--ly-muted); font-weight: 600; }

/* =============================
   Media / Helpers
   ============================= */
.object-fit-cover { object-fit: cover; }
.ratio > img, .ratio > video { width: 100%; height: 100%; object-fit: cover; }

/* Links */
.link-underline-opacity-0 { text-decoration: none; }
.link-underline-opacity-0:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Footer */
footer { border-top: 1px solid rgba(255,255,255,.06); background: rgba(12,12,16,.6); }

/* =============================
   Responsive Tweaks
   ============================= */
@media (max-width: 991.98px) {
  .hero { padding-top: 7rem; padding-bottom: 3.25rem; }
}

/* Reduzierte Bewegung für mehr Zugänglichkeit */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =============================
   Print (vereinfacht)
   ============================= */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .navbar, footer { display: none !important; }
  .card-ly { border-color: #ddd; box-shadow: none; }
}


/*-------------- NEWSLETTER --------------*/
#newsletter {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: white;
  padding: 24px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 16px;
  width: 90vw;
  max-width: 420px;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

#newsletter button.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #333;
  padding: 4px 8px;
}

@media (min-width: 768px) {
  #newsletter {
    padding: 30px;
    width: 60vw;
    max-width: 500px;
    font-size: 17px;
  }

  #newsletter button.close-btn {
    font-size: 32px;
  }
}


.mauticform_wrapper { max-width: 600px; margin: 10px auto; }
.mauticform-innerform {}
.mauticform-post-success {}
.mauticform-name { font-weight: bold; font-size: 1.5em; margin-bottom: 3px; }
.mauticform-description { margin-top: 2px; margin-bottom: 10px; }
.mauticform-error { margin-bottom: 10px; color: red; }
.mauticform-message { margin-bottom: 10px; color: green; }
.mauticform-row { display: block; margin-bottom: 20px; color: #0a0b0f; }
.mauticform-label { font-size: 1.1em; display: block; font-weight: bold; margin-bottom: 5px; }
.mauticform-row.mauticform-required .mauticform-label:after { color: #e32; content: " *"; display: inline; }
.mauticform-helpmessage { display: block; font-size: 0.9em; margin-bottom: 3px; }
.mauticform-errormsg { display: block; color: red; margin-top: 2px; }
.mauticform-selectbox, .mauticform-input, .mauticform-textarea { width: 100%; padding: 0.5em 0.5em; border: 1px solid #CCC; background: #fff; box-shadow: 0px 0px 0px #fff inset; border-radius: 4px; box-sizing: border-box; }
.mauticform-checkboxgrp-row {}
.mauticform-checkboxgrp-label { font-weight: normal; }
.mauticform-checkboxgrp-checkbox {}
.mauticform-radiogrp-row {}
.mauticform-radiogrp-label { font-weight: normal; }
.mauticform-radiogrp-radio {}
.mauticform-button-wrapper .mauticform-button.btn-ghost, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-ghost { color: #5d6c7c;background-color: #ffffff;border-color: #dddddd;}
.mauticform-button-wrapper .mauticform-button, .mauticform-pagebreak-wrapper .mauticform-pagebreak { display: inline-block;margin-bottom: 0;font-weight: 600;text-align: center;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;white-space: nowrap;padding: 6px 12px;font-size: 13px;line-height: 1.3856;border-radius: 3px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.mauticform-button-wrapper .mauticform-button.btn-ghost[disabled], .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-ghost[disabled] { background-color: #ffffff; border-color: #dddddd; opacity: 0.75; cursor: not-allowed; }
.mauticform-pagebreak-wrapper .mauticform-button-wrapper {  display: inline; }
.autoComplete_wrapper {position: relative;}
.autoComplete_wrapper > input::placeholder {transition: all 0.3s ease;}
.autoComplete_wrapper > ul {position: absolute;max-height: 226px;overflow-y: scroll;top: 100%;left: 0;right: 0;padding: 0;margin: 0.5rem 0 0 0;border-radius: 4px;background-color: #fff;border: 1px solid rgba(33, 33, 33, 0.1);z-index: 1000;outline: none;}
.autoComplete_wrapper > ul > li {padding: 10px 20px;list-style: none;text-align: left;font-size: 16px;color: #212121;transition: all 0.1s ease-in-out;border-radius: 3px;background-color: rgba(255, 255, 255, 1);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: all 0.2s ease;}
.autoComplete_wrapper > ul > li > span {float: right;}
.autoComplete_wrapper > ul > li::selection {color: rgba(#ffffff, 0);background-color: rgba(#ffffff, 0);}
.autoComplete_wrapper > ul > li:hover {cursor: pointer;background-color: rgba(123, 123, 123, 0.1);}
.autoComplete_wrapper > ul > li mark {background-color: transparent;font-weight: bold;}
.autoComplete_wrapper > ul > li mark::selection {background-color: rgba(#ffffff, 0);}
.autoComplete_wrapper > ul > li[aria-selected="true"] {background-color: rgba(123, 123, 123, 0.1);}
@media only screen and (max-width: 600px) {
  .autoComplete_wrapper > input {width: 18rem;}
}
.mauticform-field-hidden { display:none }