/* =========================
   Susis Kosmetische Fußpflege – Clean CSS
   ========================= */

/* --- Palette / Tokens --- */
:root{
  --bg:    #EFF2D8;     /* helles Grün */
  --paper: #FFFFFF;
  --ink:   #3c3a37;
  --muted: #6e6a67;

  --mint:   #9ABF15;    /* Primärgrün */
  --mint-d: #7a9811;

  --plum:   #8C3E87;    /* Lila */
  --plum-d: #73346F;

  --line:   rgba(60,58,55,.08);
  --shadow: 0 10px 30px rgba(17,24,39,.08);
}

html{ scroll-behavior:smooth; }
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 90% -10%, #fff 30%, rgba(140,62,135,.12) 60%, transparent 70%) no-repeat,
    radial-gradient(900px 500px at -10% 10%, rgba(154,191,21,.10), transparent 60%) no-repeat,
    var(--bg);
  padding-top: 0; /* Header ist nicht fixed */
}

/* --- Typo --- */
h1, h2, h3, .display-5, .display-4{
  font-family: "Playfair Display", Georgia, serif;
  letter-spacing: .3px;
}
h1.display-5{ line-height: 1.15; }
.lead{ color: #4b4846; }

/* --- Header / Branding --- */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
}
.site-logo{
  width: 300px; /* Standardgröße am PC */
  height: auto;
  display:block;
}
@media (max-width: 768px){
  .site-logo{ width:150px; }
}
.brand-bar{ gap:4px !important; }
.brand-bar .brand-copy{ margin-left:-4px; }
.site-header .brand-copy .h4{
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  color: var(--plum);
  margin: 0;
  line-height:1.05;
  font-family: "Playfair Display", Georgia, serif;
}
.site-header .brand-copy small{
  font-size: clamp(13px, 1.25vw, 16px);
  color: #5a2e58;
  display:block;
  margin-top:0;
  line-height:1.05;
}

/* --- Navbar --- */
.navbar{
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.navbar-brand{ color: var(--ink); font-weight:700; }
.navbar-brand:hover{ color: var(--plum); }
.navbar-dark .navbar-nav .nav-link{
  color:#4a4a4a; opacity:.95; font-weight:500;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
  color: var(--plum);
}
.navbar-dark .navbar-nav .nav-link.active::after{
  content:""; display:block; width:24px; height:2px; background: var(--plum);
  margin:.35rem auto 0; border-radius:2px;
}
.nav-item{ font-size:20px; font-weight:900; }

/* Burger-Icon */
.navbar-toggler-icon{
  width:1.5em; height:1.5em;
  background-repeat:no-repeat; background-position:center; background-size:100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34,34,34,.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Sections / Hero --- */
section{ padding: 96px 0; scroll-margin-top: 80px; }
section.fullvh{ min-height:100vh; display:flex; align-items:center; }

.hero{
  background: linear-gradient(180deg, rgba(140,62,135,.08), rgba(154,191,21,.08) 60%, transparent);
}

/* Willkommen kompakt */
#willkommen{ padding-top:20px; padding-bottom:44px; }
#willkommen.fullvh{ min-height:0 !important; }
@media (min-width: 992px){
  #willkommen .hero-img{
    max-height:420px; width:100%; object-fit:cover;
  }
}
#willkommen .badge-eyebrow{ margin-bottom:.6rem; }
#willkommen h1{ margin-top:.25rem; margin-bottom:.75rem; }
#willkommen .lead{ margin-bottom:.9rem; }
#willkommen .chip{ margin-top:.25rem; }

/* --- Buttons --- */
.btn{ border-radius:999px; padding:.7rem 1.2rem; font-weight:600; }
.btn-primary{
  background: var(--mint);
  border:0;
  box-shadow: 0 6px 16px rgba(154,191,21,.35);
  color:#12220a;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background: var(--plum);
  border-color: var(--plum);
  color:#fff;
  box-shadow: 0 0 0 .25rem rgba(115,52,111,.25);
}
.btn-outline-secondary{
  color: var(--ink); border:1px solid var(--ink); background:transparent;
}
.btn-outline-secondary:hover{ background: var(--ink); color:#fff; }

/* --- Eyebrow & Chips --- */
.badge-eyebrow{
  display:inline-block;
  padding:.48rem .8rem;
  border-radius:999px;
  font-weight:700;
  background:#8C3E87;  /* opak lila */
  color:#fff;
}

.chip{
  display:inline-block;
  border:0;
  padding:.5rem 1rem;
  border-radius:9999px;
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
  background:#87328c;  /* Standard lila */
  color:#fff;          /* Standard weiß */
}

/* Varianten (optional nutzbar) */
.chip--plum{ background: var(--plum); color:#fff; }
.chip--mint{ background: var(--mint); color:#12220a; }

/* Hoververhalten EINHEITLICH (nur für Elemente mit .chip--hover) */
.chip--hover:hover{
  background: var(--mint);
  color:#000;
}
.chip--hover:focus,
.chip--hover:active{
  background: var(--plum);
  color:#fff;
  outline:none;
}
.chip--hover:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}

/* --- Cards / Shop --- */
.card{
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(140,62,135,.35);
  box-shadow: 0 16px 36px rgba(140,62,135,.12);
}
.card .card-body{ padding:1.2rem 1.2rem 1.3rem; }
.card-title{
  font-family: "Playfair Display", Georgia, serif;
  font-size:1.2rem; margin-bottom:.35rem;
}
.card-text{ color: var(--muted); }

/* Produktbilder – einheitlich ohne Beschnitt */
.card-img-top{
  height:260px; object-fit:contain; background:#fff; padding:12px;
  border-top-left-radius:18px; border-top-right-radius:18px;
}
@media (max-width: 992px){ .card-img-top{ height:220px; } }
@media (max-width: 576px){ .card-img-top{ height:190px; } }

/* Preis-/Grundpreis-Helfer (optional) */
.price { font-weight:700; }
.price .vat { font-weight:400; color:#6e6a67; font-size:.95em; }
.base { margin-top:-2px; }

/* --- Wellen-Separator --- */
.wave-sep{ line-height:0; overflow:hidden; }
.wave-sep svg{ width:100%; height:80px; display:block; }
.wave-sep path{ fill:#8C3E87; }
@media (max-width: 576px){
  .wave-sep svg{ height:42px; }
  .wave-sep{ margin-top:-6px; margin-bottom:-10px; }
}

/* --- Offcanvas --- */
.offcanvas-wide{ --bs-offcanvas-width: clamp(680px, 90vw, 1000px); }
.offcanvas-wide .offcanvas-body{ overflow-x:hidden; }
@media (max-width: 991.98px){ .offcanvas-wide{ --bs-offcanvas-width: 100vw; } }
.offcanvas-header{ border-bottom:2px solid rgba(115,52,111,.15); }
.offcanvas-title{ color: var(--plum); }

/* --- Produkt-Specs (ohne Tabelle) --- */
.spec-columns{
  display:grid;
  grid-template-columns: minmax(260px,1fr) minmax(0,1fr);
  gap: 2rem 3rem;
}
@media (max-width: 991.98px){ .spec-columns{ grid-template-columns: 1fr; } }
.spec-row{
  display:grid;
  grid-template-columns: minmax(180px,35%) minmax(0,1fr);
  gap:1rem;
  padding:.65rem 0 .75rem;
  border-top:2px solid rgba(115,52,111,.18);
}
.spec-list:last-child .spec-row:last-child{
  border-bottom:2px solid rgba(115,52,111,.12);
}
.spec-key{ font-weight:700; color:#5a2e58; }
.spec-val{ color:var(--ink); line-height:1.5; overflow-wrap:anywhere; hyphens:auto; }



/* --- Bildnachweis --- */
.img-credit-all{
  font-size:.85rem; color:#6b646b;
  margin-top:-.5rem; margin-bottom:1.25rem;
}
.img-credit-all a{
  color:inherit; text-decoration:none; border-bottom:1px dotted currentColor;
}
.img-credit-all a:hover{ color: var(--plum); text-decoration:underline; }

/* --- Footer --- */
footer{
  background:#0f172a;
  color:#e2e8f0;
  padding:32px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
footer a{ color:#cbd5e1; text-decoration:none; }
footer a:hover{ color:#fff; text-decoration:underline; }

/* Footer: Designer-Credit (dezent) */
footer .designer-credit{
  margin-left:.5rem;
  color:#cbd5e1; opacity:.9; white-space:nowrap;
}
@media (max-width:576px){
  footer .designer-credit{
    display:block; margin-left:0; margin-top:.25rem;
    white-space:normal; opacity:.85;
  }
}

/* Footer: Social/Icon-Zeile auf kleinen Geräten umbrechen */
footer .d-flex.gap-3{
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
@media (max-width: 400px){
  footer .d-flex.gap-3 a i{ font-size: 1.2rem; }
}

/* Social-Buttons */
.socials .social{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--plum);
  transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  text-decoration: none;
  font-size: 18px; line-height: 1;
}
.socials .social:hover{
  background: var(--plum);
  color:#fff;
  border-color: var(--plum);
  transform: translateY(-1px);
}
.socials .social.wa{ background:#25D366; color:#fff; border-color:#25D366; }
.socials .social.wa:hover{ filter: brightness(.95); }

/* --- Mobile Layout Tweaks --- */
@media (max-width: 767.98px){
  #willkommen{ text-align:center; }
  #willkommen .badge-eyebrow{ margin-left:auto; margin-right:auto; }
  #willkommen h1, #willkommen .lead{ text-align:center; }
  #willkommen .d-flex.flex-wrap{ justify-content:center; }
  #willkommen .mt-4.d-flex{ justify-content:center; }

  #leistungen h2, #ueber-mich h2, #shop h2, #kontakt h2{
    text-align:center;
  }
  #leistungen .btn, #shop .btn{
    margin-left:auto; margin-right:auto; display:inline-flex;
  }
}

/* --- Floating Call Button (mobil) --- */
.call-fab{
  position: fixed;
  right: 16px;
  bottom: max(72px, env(safe-area-inset-bottom) + 10px);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#9ABF15; color:#122; text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  z-index:1070;
  transition: transform .12s ease, filter .12s ease;
}
.call-fab:hover{ filter:brightness(.95); }
.call-fab:active{ transform:scale(.98); }

/* ===== Tiny phones / iPhone SE Fixes (<= 360px) ===== */
@media (max-width: 360px){
  .call-fab{ right: 12px; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  footer{ padding-bottom: 70px; }
  footer .container{ padding-right: 70px; row-gap: 8px; }
  footer .d-flex.gap-3,
  footer .d-flex.align-items-center.gap-3{
    flex-wrap: wrap; justify-content: center; gap: 10px;
  }
  footer .ms-3{ margin-left: 0 !important; }
  .socials .social{ width: 30px; height: 30px; font-size: 16px; }
  footer p, footer .designer, footer a{ font-size: .95rem; }
  .btn{ padding: .6rem 1rem; }
  h1.display-5{ font-size: 1.9rem; }
}

/* --- Zertifikat --- */
.cert-figure{ margin: 1rem auto; text-align: center; }
.cert-frame{
  max-width: 520px; margin: 0 auto; background: #fff;
  border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 10px;
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
}
.cert-img{ display: block; width: 100%; height: auto; }

/* --- Kleinzeug --- */
.card-note {
  font-size: .9rem;
  color: #555;
  margin-top: -4px;
  margin-bottom: 6px;
}

/* Abschnittstitel + Preisnotiz */
.section-title{ display:flex; align-items:baseline; gap:12px; }
.section-title .price-note{ font-size:.9rem; color:#555; font-weight:400; }
.site-header .brand-copy .h4 {
  margin-top: 140px;   /* Abstand nach unten */
  display: block;
  text-align: left;
  transform: translateX(-160px); /* nach links verschieben */
}
/* Standard-Desktop-Layout */
.site-header .brand-copy .h4 {
  margin-top: 140px;
  display: block;
  text-align: left;
  transform: translateX(-160px);
  font-size: 1.8rem; /* normal groß */
}

/* Ab Tablet nach unten */
@media (max-width: 768px) {
  .site-header .brand-copy .h4 {
    margin-top: 12px;
    transform: none;          /* kein Verschieben mehr */
    text-align: center;       /* zentrieren */
    font-size: 1.2rem;        /* kleiner */
  }
}



.site-header .container {
  padding-top: 0.5rem !important;   /* vorher 3 (≈ 1rem) bzw. 4 (≈ 1.5rem) */
  padding-bottom: 0.5rem !important;
}
body {
  font-family: 'Poppins', sans-serif;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}