@font-face{
    font-family:"Inter";
    src:url("assets/fonts/inter-400.woff2") format("woff2");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Inter";
    src:url("assets/fonts/inter-600.woff2") format("woff2");
    font-weight:600; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Playfair Display";
    src:url("assets/fonts/playfair-600.woff2") format("woff2");
    font-weight:600; font-style:normal; font-display:swap;
  }



:root{
    --primary:#052a32;
    --accent:#e88d78;
    --accent-soft:#ffd4ca;
  
    --bg:#fffdfc;
    --surface:#ffffff;
    --text:#132023;
    --muted:#5b6669;
    --border:#e8ecee;
    --shadow:0 10px 30px rgba(5,42,50,.06);
  
    --radius:16px;
    --container:1120px;
  }
  
  /* Reset & Base */
  *,*::before,*::after{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:"Glacial Indifference", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,h3{
    font-family:"Glacial Indifference", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    line-height:1.25; margin:0 0 .6rem;
  }
  h1{ font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:.2px; }
  h2{ font-size:clamp(1.4rem,2.2vw,1.9rem); }
  p{ margin:0 0 1rem; }
  a{ color:var(--primary); text-decoration:none; transition:color .2s ease; }
  a:hover{ color:var(--accent); text-decoration:none; }
  
  .container{ max-width:var(--container); margin-inline:auto; padding:0 1.2rem; }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; padding:.9rem 1.2rem; border-radius:999px; border:1px solid transparent;
    font-weight:600; cursor:pointer; text-decoration:none; letter-spacing:.2px;
    transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
    box-shadow:var(--shadow);
  }
  .btn:active{ transform:translateY(1px); }

  /*
  .btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
  .btn-primary:hover{ background:#0b3a42; border-color:#0b3a42; }
  */
  /* Spezielle Farbvariante für die drei Buttons */
.btn-primary {
    background-color: #ffd4ca;
    color: #000;
    border: none; /* falls du keinen Rand willst */
    transition: all 0.3s ease;
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: #052a32;
    color: #fff;
  }
  
  /* Falls die Buttons Links <a> sind, sicherstellen, dass Text nicht unterstrichen wird */
  .btn-primary:link,
  .btn-primary:visited {
    text-decoration: none;
  }


  .btn-ghost{ background:var(--surface); border-color:var(--accent); color:var(--primary); }
  .chip{ background:var(--accent-soft); color:var(--primary); padding:.4rem .7rem; border-radius:999px; font-size:.85rem; font-weight:700; }
  
  /* Header / Navigation */
  header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:66px; }
  .brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; }
  .brand img{ height:42px; width:auto; display:block; }
  .menu{ display:none; gap:1rem; align-items:center; }
  .menu a{ font-weight:600; color:var(--text); }
  .nav-toggle{ background:none; border:none; font-size:1.2rem; cursor:pointer; }
  @media (min-width:860px){ .menu{ display:flex; } .nav-toggle{ display:none; } }
  
  /* Mobile Menu */
  .mobile-menu{ display:none; border-bottom:1px solid var(--border); background:var(--surface); }
  .mobile-menu a{ display:block; padding:.9rem 1.2rem; border-top:1px solid var(--border); color:var(--text); font-weight:600; }
  
  /* Hero */
  .hero{ padding:clamp(2rem,6vw,6rem) 0; }
  .hero-grid{ display:grid; gap:1.6rem; align-items:center; }
  .hero .eyebrow{ margin-bottom:.8rem; }
  .hero p{ color:var(--muted); font-size:1.06rem; }
  .hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.2rem; }
  @media (min-width:960px){ .hero-grid{ grid-template-columns:1.1fr .9fr; } }
  
  .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1rem,2.5vw,1.6rem); box-shadow:var(--shadow); }
  
  /* Sections & Grids */
  section{ padding:clamp(2rem,6vw,4rem) 0; }
  .grid-2{ display:grid; gap:1.3rem; }
  @media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; } }
  
  /* Offer tiles */
  .offer{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1rem; }
  @media (min-width:720px){ .offer{ grid-template-columns:repeat(3,1fr); } }
  .tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow); }
  .tile h3{ margin-bottom:.4rem; }
  .tile p{ color:var(--muted); }
  
  /* Testimonial */
  .testimonial{ font-style:italic; color:#2c2f33; }
  
  /* Forms */
  .form{ display:grid; gap:.9rem; }
  .form label{ font-weight:600; }
  .form input,.form textarea,.form select{
    width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid var(--border); background:#fff;
    font:inherit;
  }
  .form .row{ display:grid; gap:.9rem; }
  @media (min-width:720px){ .form .row{ grid-template-columns:1fr 1fr; } }
  
  /* CTA band */
  .cta{
    background:linear-gradient(160deg,#fff7f3,#ffffff); border:1px solid var(--border);
    border-radius:var(--radius); padding:1.4rem; display:flex; flex-direction:column; gap:.6rem;
    box-shadow:var(--shadow);
  }
  @media (min-width:800px){ .cta{ flex-direction:row; align-items:center; justify-content:space-between; } }
  
  /* Footer */
  footer{ border-top:1px solid var(--border); padding:2rem 0; color:var(--muted); font-size:.95rem; }
  footer a{ color:inherit; }
  
  /* Utils */
  .spacer{ height:.6rem; }
  .muted{ color:var(--muted); }
  
		
		/* === FAQ (Accordion) === */
.faq {
  --faq-border: #e6e6e9;
  --faq-bg: #ffffff;
  --faq-bg-open: #fafafe;
  --faq-text: #1a1a1a;
  --faq-accent: #5b6cff; /* Passe an deine Markenfarbe an */
  max-width: 860px;
  margin: 3rem auto;
  padding: 0 1rem;
  color: var(--faq-text);
  scroll-margin-top: 80px; /* angenehmes Anscrollen bei Hash-Links */
}

.faq-title {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  margin: 0 0 1rem;
  line-height: 1.2;
}

.faq-item {
  border: 1px solid var(--faq-border);
  background: var(--faq-bg);
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 0.75rem;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .2s ease, background-color .2s ease;
}

.faq-item[open] {
  background: var(--faq-bg-open);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.125rem;
  font-weight: 700;
  font-size: 1.05rem;
}

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

.faq summary span {
  display: inline-block;
}

/* Plus/Minus-Icon rein per CSS */
.faq summary::after {
  content: "+";
  font-weight: 700;
  line-height: 1;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-grid;
  place-items: center;
  color: var(--faq-accent);
  transition: transform .2s ease;
}

.faq-item[open] > summary::after {
  content: "–";
  transform: rotate(0deg);
}

/* Hover/Focus States */
.faq summary:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--faq-accent), white 40%);
  outline-offset: 2px;
  border-radius: 12px;
}
.faq summary:hover {
  background: color-mix(in oklab, var(--faq-accent), white 92%);
}

/* Inhalt */
.faq .faq-content {
  padding: 0 1.125rem 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

.faq .faq-content p {
  margin: 0.5rem 0 0.75rem;
}

.faq .faq-content ul {
  margin: 0.25rem 0 0.75rem 1.25rem;
  padding: 0;
}

.faq .faq-content li {
  margin: 0.25rem 0;
}