/* =================================================
   LS – Nails | CORE RESET
   ================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

/* =================================================
   HEADER – STABIL & EINZEILIG
   ================================================= */

.container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px 24px;
  min-height: 72px;

  position: relative;
  background: #fff;

  flex-wrap: nowrap; /* 🔴 WICHTIG: NIE umbrechen */
}

/* Logo links */
.container-header .navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.container-header .navbar-brand img {
  height: 64px;
  width: auto;
  display: block;
}

/* Navigation / Burger rechts */
.container-header .container-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* =================================================
   DESKTOP MENU
   ================================================= */

@media (min-width: 992px) {

  .navbar-toggler {
    display: none !important;
  }

  .navbar-collapse {
    display: block !important;
    position: static;
  }

  .navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
  }
}

/* =================================================
   MOBILE MENU
   ================================================= */

@media (max-width: 991.98px) {

  /* Burger sichtbar */
  .navbar-toggler {
    display: block;
    border: none;
    background: transparent;
    z-index: 3000;
    padding: 70px;
  }

  .navbar-toggler .icon-menu {
    font-size: 26px;
    color: #000;
  }

  /* AUFKLAPP-MENÜ */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 10px;

    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 2000;

    padding: 10px; /* außen nichts */
  }

  
  /* INNERER CONTAINER = Mitte */
  .navbar-collapse > .navbar-nav {
    max-width: 480px;      /* 🟢 steuert Breite */
    margin: 0 auto;        /* 🟢 zentriert */
    padding: 24px 24px;    /* 🟢 Innenabstand */

    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }

  .navbar-nav li,
  .navbar-nav a {
    width: 100%;
  }
}

/* =================================================
   MENU LINKS & UNDERLINE (CI)
   ================================================= */

.container-header a {
  text-decoration: none !important;
  color: #111;
  position: relative;
}

.container-header a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #F40986;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.container-header a:hover::after,
.container-header a.active::after,
.container-header li.active > a::after {
  opacity: 1;
}

/* =================================================
   TYPOGRAPHY
   ================================================= */

body {
  font-family: "Calibri Light", Calibri, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.75;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  letter-spacing: 0.6px;
}

/* =================================================
   FOOTER
   ================================================= */

.container-footer {
  padding: 6px 0;              /* vorher 14px → deutlich schmaler */
}

.container-footer ul {
  display: flex;
  justify-content: center;
  gap: 12px;                   /* etwas Luft zwischen Links */
  list-style: none;
  padding: 0;
  margin: 0;
}

.container-footer li {
  line-height: 1;              /* reduziert die Höhe zusätzlich */
}

.container-footer a {
  font-size: 11px;             /* minimal kleiner */
  color: #FFB5DC;
  text-decoration: none;
}

.container-footer a:hover {
  text-decoration: underline;  /* dezenter Hover */
}

/* =====================================
   FIX: Mobile Menü – Text IMMER sichtbar
   ===================================== */
@media (max-width: 991.98px) {

  .navbar-collapse,
  .navbar-collapse * {
    color: #111 !important;   /* dunkle Schrift erzwingen */
  }

  .navbar-collapse a:hover,
  .navbar-collapse a:focus {
    color: #F40986 !important; /* CI-Hover */
  }

}


/* =====================================
   FIX: Footer Menü immer horizontal
   ===================================== */
.container-footer ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  justify-content: center;
  align-items: center;
  gap: 0px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.container-footer li {
  white-space: nowrap;
}

/* =====================================
   Startseite
   ===================================== */
  :root{
      --pink:#F40986;
      --rosa:#FFB5DC;
      --black:#0b0b0f;
      --text:#16161a;
      --muted:#6b7280;
      --line:#e9e9ee;
      --bg:#ffffff;
      --card:#ffffff;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
      --radius: 18px;
      --max: 1100px;
    }

    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font-family: Calibri, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }
    a{color:inherit}

    /* Layout helpers */
    .wrap{max-width:var(--max); margin:0 auto; padding:0 18px;}
    .grid{display:grid; gap:18px;}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:12px 18px; border-radius:999px; text-decoration:none;
      border:1px solid rgba(255,255,255,.35);
      transition: transform .15s ease, opacity .15s ease;
      font-weight:600;
    }
    .btn:hover{transform: translateY(-1px); opacity:.95;}
    .btn.primary{background:var(--black); color:#fff; border-color:rgba(255,255,255,0);}
    .btn.ghost{background:rgba(255,255,255,.12); color:#fff;}
    .pill{
      display:inline-flex; gap:8px; align-items:center;
      padding:6px 10px; border-radius:999px;
      background:rgba(255,255,255,.15);
      border:1px solid rgba(255,255,255,.25);
      font-size:.92rem;
    }
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow: var(--shadow);
      padding:18px;
    }
    .muted{color:var(--muted)}
    .h1{font-size:2.2rem; line-height:1.15; margin:0;}
    .h2{font-size:1.5rem; line-height:1.2; margin:0 0 12px;}
    .h3{font-size:1.05rem; margin:0 0 6px;}
    .sep{height:1px; background:var(--line); margin:22px 0;}
    .kicker{letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; color:rgba(255,255,255,.85);}

    /* Topbar */
    .topbar{
      position:sticky; top:0; z-index:30;
      backdrop-filter:saturate(180%) blur(10px);
      background:rgba(255,255,255,.75);
      border-bottom:1px solid rgba(233,233,238,.8);
    }
    .topbar .inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0;
    }
    .brand{
      display:flex; align-items:center; gap:10px; text-decoration:none;
    }
    .logoDot{
      width:12px; height:12px; border-radius:999px;
      background: radial-gradient(circle at 30% 30%, var(--rosa), var(--pink));
      box-shadow:0 0 0 4px rgba(244,9,134,.12);
    }
    .brand strong{font-weight:700}
    nav{display:flex; gap:14px; flex-wrap:wrap;}
    nav a{
      text-decoration:none; color:var(--text);
      font-weight:600; font-size:.95rem; padding:8px 10px; border-radius:10px;
    }
    nav a:hover{background:rgba(244,9,134,.08); color:var(--black);}

.hero{
  background: #ffffff;        /* weißer Hintergrund */
  color: #000000;             /* schwarze Schrift */
  padding: 56px 0 26px;
}

.hero .grid{
  grid-template-columns: 1.2fr .8fr;
  align-items: stretch;
}

.hero h1,
.hero h2,
.hero h3 {
  color: #000000;
}

.hero p{
  margin: 12px 0 0;
  color: #333333;
}

.hero .ctaRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Rechte Box (vorher halbtransparent → jetzt sichtbar) */
.heroCard{
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  padding: 18px;
}

.heroCard .mini{
  font-size: .95rem;
  color: #000000;
  margin: 0;
}

/* Stats / "Tabelle" */
.stats{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 14px;
}

.stat{
  background: #f9f9f9;        /* leichtes Grau, damit man es sieht */
  border: 1px solid #dddddd;
  border-radius: 14px;
  padding: 12px;
  text-align: left;
}

.stat strong{
  display: block;
  font-size: 1.05rem;
  color: #000000;
}

.stat span{
  font-size: .9rem;
  color: #555555;
}

/* ================================
   Sections
   ================================ */

section{
  padding: 42px 0;
}

.twoCol{
  grid-template-columns: 1fr 1fr;
}

.threeCol{
  grid-template-columns: repeat(3,1fr);
}

/* ================================
   Services
   ================================ */

.serviceItem{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: #F40986;        /* klares Pink statt Verlauf */
  flex: 0 0 40px;
}
    /* Gallery placeholder */
    .gallery{
      display:grid; grid-template-columns:repeat(12,1fr); gap:12px;
    }
    .ph{
      border-radius:16px;
      background:
        linear-gradient(135deg, rgba(244,9,134,.15), rgba(255,181,220,.18)),
        repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 8px, rgba(0,0,0,.02) 8px 16px);
      border:1px solid var(--line);
      min-height:120px;
      position:relative;
      overflow:hidden;
    }
    .ph::after{
      content:"Foto";
      position:absolute; bottom:10px; left:12px;
      font-weight:700; color:rgba(0,0,0,.35);
      font-size:.9rem;
    }
    .ph.a{grid-column: span 7; min-height:230px;}
    .ph.b{grid-column: span 5; min-height:230px;}
    .ph.c,.ph.d,.ph.e{grid-column: span 4;}
    .note{font-size:.95rem; color:var(--muted); margin:10px 0 0;}

    /* FAQ */
    details{
      border:1px solid var(--line);
      border-radius:16px;
      padding:14px 16px;
      background:#fff;
    }
    details + details{margin-top:10px;}
    summary{cursor:pointer; font-weight:700;}
    details p{margin:10px 0 0; color:var(--muted);}

    /* Footer */
    footer{
      border-top:1px solid var(--line);
      padding: 4px 0 !important;
      background:#fafafb;
    }
    .footGrid{display:grid; grid-template-columns: 1.2fr .8fr; gap:18px;}
    .fine{font-size:.92rem; color:var(--muted);}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 12px; border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      font-weight:700;
    }

    /* Responsive */
    @media (max-width: 900px){
      .hero .grid{grid-template-columns:1fr;}
      .stats{grid-template-columns:1fr;}
      .twoCol,.threeCol{grid-template-columns:1fr;}
      .footGrid{grid-template-columns:1fr;}
      .h1{font-size:1.9rem;}
      nav{display:none;}
    }

/* ================================
   Hero – Weiß: Sichtbarkeit fix
   ================================ */

/* Ghost-Button sichtbar machen */
.hero .btn.ghost{
  background: transparent;
  color: #000000;
  border: 1px solid #000000;
}

/* Hinweistext unter den Buttons */
.hero .note{
  color: #555555;
}

/* Pill / Kicker sichtbar */
.hero .pill{
  background: #f5f5f5;
  border: 1px solid #dddddd;
}

.hero .kicker{
  color: #000000;
}
.hero .note{
  color: #555555 !important;
}

/* ================================
   Hero – eigene Button-Farben
   ================================ */

/* macht .btn.primary wie Joomla-Pink */
.btn.primary{
  background: #F40986;
  border: 1px solid #F40986;
  color: #fff;
}
.btn.primary:hover{
  background: #D40872;  /* dein Hover-Pink */
  border-color: #D40872;
}

.btn.ghost{
  background: transparent;
  border: 1px solid #F40986;
  color: #F40986;
}
.btn.ghost:hover{
  background: rgba(244, 9, 134, .08);
}




/* Joomla-Menü: "Mehr" Separator ZWINGEND angleichen */
nav .mod-menu__separator.separator {
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}