@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); }
  
  /* === Booking Calendar (leichtgewichtig, an Anikas Look angelehnt) === */
.cal-head{
  display:flex; align-items:center; justify-content:center;
  gap:1rem; font-weight:600; font-size:1.6rem; margin: .5rem 0 1rem;
  color:#052a32;
}
.cal-nav{
  border:none; background:transparent; font-size:2rem; line-height:1; cursor:pointer;
  color:#052a32; opacity:.85; padding:.2rem .6rem; border-radius:8px;
}
.cal-nav:hover{ background:#ffd4ca; color:#000; }

.cal-wrap{
  display:grid; grid-template-columns: 1fr 240px; gap:1.2rem; align-items:start;
}
.cal-weekdays{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:.5rem;
  font-size:.85rem; color:#6b7280; margin-bottom:.4rem;
}
.cal-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:.5rem;
}
.day{
  display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:1/1; border-radius:999px;
  background: #eef3ef; color:#052a32; font-weight:500;
  transition: .15s ease-in-out; border:2px solid transparent;
}
.day.available{ background:#e6efe7; }          /* sanft eingefärbt */
.day.disabled{ background:#f3f4f6; color:#a3a3a3; opacity:.6; cursor:not-allowed; }
.day.empty{ background:transparent; }
.day.available:hover{ filter: brightness(0.97); }
.day.selected{ border-color:#052a32; box-shadow:0 0 0 2px rgba(5,42,50,.08) inset; }

.cal-side{
  display:flex; flex-direction:column; gap:.6rem;
}
.cal-side .tz{
  font-size:.85rem; color:#6b7280; text-align:right; padding-right:.4rem;
}
.times-list{
  display:flex; flex-direction:column; gap:.6rem; max-height:360px; overflow:auto;
}
.time-btn{
  text-align:left; border:none; border-radius:999px; padding:.6rem 1rem; cursor:pointer;
  background:#e0eade; color:#052a32; font-weight:600;
}
.time-btn:hover{ background:#d7e3d9; }
.time-btn.selected{ outline:2px solid #052a32; background:#ffd4ca; color:#000; }
@media (max-width: 900px){
  .cal-wrap{ grid-template-columns: 1fr; }
}

/* Kalender-Header-Labels mittig ausrichten */
.cal-weekdays > div {
  text-align: center;
  font-weight: 600;          /* optional, wie im Screenshot */
  letter-spacing: .02em;     /* optional, feine Optik */
}

/* Safety: gleiche Spalten & keine Innenabstände */
.cal-weekdays, .cal-grid {
  grid-template-columns: repeat(7, 1fr);
  padding: 0;
}

/* Falls nötig: Tage exakt mittig im Grid halten */
.cal-grid { justify-items: center; }

/* --- Calendar column placement (fix alignment) --- */
.cal-wrap{
  display:grid;
  grid-template-columns: 1fr 240px; /* links: Kalender, rechts: Timeslots */
  gap: 1.2rem;
  align-items:start;
}

/* Wochentage + Kalendertage immer in der LINKEN Spalte */
.cal-weekdays{ grid-column: 1; }
.cal-grid{     grid-column: 1; }

/* Timeslots immer in der RECHTEN Spalte */
.cal-side{     grid-column: 2; }

/* Gleiche Spalten und Zentrierung für beide Reihen */
.cal-weekdays,
.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  margin:0; padding:0; box-sizing:border-box;
}
.cal-weekdays > div{ text-align:center; font-weight:600; letter-spacing:.02em; }
.cal-grid{ justify-items:center; }

/* Mobile: eine Spalte – alles untereinander */
@media (max-width: 900px){
  .cal-wrap{ grid-template-columns: 1fr; }
  .cal-side{ grid-column: 1; }
}


/* Parent-Layout: zwei Spalten -> mobil eine Spalte */
.booking-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* links Profilkarte, rechts Kalender */
  gap: 3rem;
  align-items: start;
}

/* Kalender-internes Grid hast du schon: .cal-wrap {...} */

/* Breakpoint: alles untereinander (erst Anika-Box, dann Kalender) */
@media (max-width: 900px){
  .booking-grid{
    grid-template-columns: 1fr;   /* eine Spalte */
    gap: 2rem;
  }
  .cal-wrap{
    grid-template-columns: 1fr;   /* Kalender links + Timeslots darunter */
  }
  .cal-side{
    grid-column: 1;                /* Timeslots unter dem Kalender */
  }
}