/* ==========================================================================
   Medea Wedig — Stylesheet
   Aufbau nach den Design-Vorlagen der Webdesignerin (Startseite / Preisseite /
   Buchungsseite / Bestätigungsseite, jeweils iPhone- und iPad-Ansicht).

   Mobile-first: die Basiswerte entsprechen der iPhone-Vorlage,
   ab 834px greifen die Werte der iPad-Vorlage.
   ========================================================================== */

:root{
  /* ---- Farben (Design-Vorlage) ---- */
  --wine:#7A1B3D;
  --wine-dark:#6B1836;
  --rose:#C24B66;
  --coral:#D9714F;
  --gold:#E0B85E;
  --green:#A9BE5C;
  --blue:#3D84C4;
  --cream:#FBF3E7;
  --plum-ink:#5C2340;

  --color-bg:#ffffff;
  --color-footer-bg:#f4f0ee;
  --color-text-primary:#1a1a1a;
  --color-text-secondary:#6b6b6b;
  --color-accent:var(--rose);
  --color-hairline:rgba(0,0,0,0.08);
  --color-muted:#a3a3a3;

  /* ---- Hero-Verlauf (120°, Rezept aus der Vorlage) ---- */
  --hero-gradient:linear-gradient(120deg,
    #6B1836 0%,
    #9C2C4C 20%,
    #C24B66 36%,
    #D9714F 48%,
    #E39A52 58%,
    #E0B85E 67%,
    #C7C464 77%,
    #A9BE5C 86%);

  /* ---- Schriften ---- */
  --font-display:'Playfair Display', Georgia, "Times New Roman", serif;
  --font-body:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ---- Maße ---- */
  --content-max:760px;
  --page-pad:22px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--color-bg);
  color:var(--color-text-primary);
  font-family:var(--font-body);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

img{ max-width:100%; }
a{ color:inherit; }

/* ==========================================================================
   Header (weiß, Logo mittig, Burger rechts)
   ========================================================================== */
.page-header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px var(--page-pad);
  height:68px;
  background:var(--color-bg);
  box-shadow:0 1px 0 var(--color-hairline), 0 2px 6px -2px rgba(0,0,0,0.06);
  position:sticky;
  top:0;
  z-index:30;
}
.page-header .logo-mark{
  height:56px;
  width:auto;
  display:block;
}

/* Burger */
.menu-icon{
  width:26px; height:19px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:absolute;
  right:var(--page-pad);
  top:50%;
  transform:translateY(-50%);
  background:none; border:none; padding:0;
  cursor:pointer;
  z-index:60;
}
.menu-icon span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--color-text-primary);
  transition:transform .28s ease, opacity .2s ease, background-color .28s ease;
}

/* ==========================================================================
   Navigations-Overlay
   ========================================================================== */
.nav-overlay{
  position:fixed;
  inset:0;
  background:var(--hero-gradient);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.nav-overlay::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.05;
  mix-blend-mode:overlay;
}
body.nav-open .nav-overlay{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* Burger wird im offenen Zustand zum X (in Cream) */
body.nav-open .menu-icon span{ background:var(--cream); }
body.nav-open .menu-icon span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
body.nav-open .menu-icon span:nth-child(2){ opacity:0; }
body.nav-open .menu-icon span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

.nav-overlay ul{
  list-style:none;
  text-align:center;
  position:relative;
  z-index:1;
}
.nav-overlay li{ margin:0 0 22px; }
.nav-overlay li:last-child{ margin-bottom:0; }
.nav-overlay a{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:400;
  color:var(--cream);
  text-decoration:none;
  letter-spacing:.3px;
  display:inline-block;
  padding:4px 10px;
}
.nav-overlay a[aria-current="page"]{
  border-bottom:1.5px solid rgba(251,243,231,.65);
}
.nav-overlay .nav-social{
  margin-top:34px;
  display:flex;
  justify-content:center;
  gap:18px;
}
.nav-overlay .nav-social a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  padding:9px 18px;
  border:1.4px solid rgba(251,243,231,.7);
  border-radius:999px;
}

/* ==========================================================================
   Startseite — Hero mit Farbverlauf
   ========================================================================== */
/* Auf der Startseite gibt es keinen weissen Header — der Burger sitzt
   direkt auf dem Farbverlauf. */
.startseite .menu-icon{
  position:fixed;
  top:34px;
  right:7.5%;
  transform:none;
}
.startseite .menu-icon span{ background:var(--cream); }
body.startseite.nav-open .menu-icon span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
body.startseite.nav-open .menu-icon span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }

.gradient-wrap{
  position:relative;
  background:var(--hero-gradient);
}
.gradient-wrap::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.05;
  mix-blend-mode:overlay;
}
.gradient-wrap > *{ position:relative; z-index:1; }

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:56px 7% 60px;
  min-height:min(58vh, 520px);
}
.hero-brand{ margin-bottom:44px; }
.hero-brand img{
  width:34vw;
  max-width:200px;
  height:auto;
  display:block;
  margin:0 auto;
}
.hero-title{
  font-family:var(--font-display);
  font-size:46px;
  font-weight:400;
  color:var(--cream);
  line-height:1.1;
  letter-spacing:.2px;
  margin-bottom:40px;
}
.btn-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:58%;
  min-width:200px;
  max-width:220px;
  text-align:center;
  text-decoration:none;
  padding:13px 20px;
  background:#ffffff;
  color:var(--color-text-primary);
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:600;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,0.14); }
.btn-outline{
  background:transparent;
  color:var(--cream);
  border:1.5px solid var(--cream);
  box-shadow:none;
}
.btn-outline:hover{ box-shadow:none; background:rgba(251,243,231,.12); }

/* ---- Foto-Reihe ---- */
.nailart-section{ padding:22px 0 30px; }
.nailart-header{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  padding:0 var(--page-pad);
  margin-bottom:16px;
}
.nailart-swipe{
  font-size:13px;
  font-weight:500;
  color:rgba(251,243,231,.85);
  white-space:nowrap;
}
.nailart-scroll{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:0 var(--page-pad) 4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.nailart-scroll::-webkit-scrollbar{ display:none; }
.nailart-card{ flex:0 0 auto; width:136px; }
.nailart-card img{
  width:136px;
  height:170px;
  object-fit:cover;
  display:block;
  box-shadow:0 8px 18px -6px rgba(0,0,0,0.35);
}
.nailart-more{
  flex:0 0 auto;
  width:156px;
  height:170px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--cream);
  text-align:center;
  text-decoration:none;
}
.nailart-more svg{ width:30px; height:30px; }
.nailart-more span{
  font-size:12.5px;
  font-weight:500;
  line-height:1.3;
  padding:0 12px;
}
.gradient-spacer{ height:90px; }

/* ==========================================================================
   Inhaltsseiten (Preise / Buchung / Kontakt / Rechtliches)
   ========================================================================== */
main{ flex:1 0 auto; }

.page-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:32px;
  color:var(--color-text-primary);
  padding:24px var(--page-pad) 2px;
  text-align:center;
}
.page-title.with-meta{ padding-bottom:16px; }

.page-meta{
  padding:0 var(--page-pad) 38px;
  text-align:center;
}
.page-meta p{
  font-size:12.5px;
  color:var(--color-text-primary);
  line-height:1.5;
  margin:0;
}
.page-meta .valid-from{ font-weight:600; }

.page-content{
  padding:0 var(--page-pad) 8px;
  max-width:var(--content-max);
  margin:0 auto;
  width:100%;
}

/* ---- Pinterest-Hinweis ---- */
.pinterest-callout{
  text-align:center;
  padding:0 var(--page-pad) 16px;
}
.pinterest-text{
  font-size:12px;
  color:var(--color-text-primary);
  line-height:1.4;
  margin:0 0 10px;
}
.pinterest-btn{
  display:inline-flex;
  align-items:center;
  padding:5px 14px;
  border-radius:999px;
  border:1.2px solid var(--color-accent);
  color:var(--color-accent);
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.pinterest-btn:hover{ background:var(--color-accent); color:#fff; }

/* ==========================================================================
   Preisliste
   ========================================================================== */
.price-category{ margin-bottom:28px; }
.price-category:last-child{ margin-bottom:4px; }

.price-category-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.price-category-title .title-line{
  flex:1;
  height:1px;
  background:var(--color-hairline);
}
.price-category-title .title-badge{
  flex:0 0 auto;
  background:var(--color-footer-bg);
  color:var(--color-text-primary);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:9px 20px;
  border-radius:999px;
  white-space:nowrap;
}
.price-category-title .title-badge.gradient{
  background:var(--hero-gradient);
  color:var(--cream);
}

.price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:22px;
  padding:14px 0;
  border-bottom:1px solid var(--color-hairline);
}
.price-row:last-of-type{ border-bottom:none; }
.price-row-main{ flex:1; min-width:0; }
.price-top-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.price-name{
  font-size:14.5px;
  font-weight:600;
  color:var(--color-text-primary);
  margin:0;
}
.price-duration{
  flex:0 0 auto;
  font-size:11px;
  color:var(--color-text-secondary);
  white-space:nowrap;
}
.price-variant{
  font-size:12.5px;
  font-weight:600;
  color:var(--rose);
  line-height:1.35;
  margin:4px 0 0;
}
.price-desc,
.price-caveat{
  font-size:11px;
  font-style:italic;
  color:var(--color-text-secondary);
  line-height:1.4;
  margin:3px 0 0;
}
.price-value{
  flex:0 0 auto;
  font-size:16px;
  font-weight:700;
  color:var(--wine);
  white-space:nowrap;
}
.price-note{
  font-size:11.5px;
  color:var(--color-text-secondary);
  font-style:italic;
  margin-top:14px;
  line-height:1.5;
}

/* ==========================================================================
   Buchungsseite — Service-Karten
   ========================================================================== */
.booking-meta{
  padding:0 var(--page-pad) 20px;
  text-align:center;
}
.booking-meta .detail{
  font-size:12px;
  color:var(--color-text-primary);
  line-height:1.35;
  margin:0;
}

.service-card{
  background:#ffffff;
  border:1.5px solid rgba(0,0,0,0.18);
  border-radius:0;
  padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.service-card + .service-card{ margin-top:16px; }

.service-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.service-card-header > div:first-child{ min-width:0; }
.service-name{
  font-size:15px;
  font-weight:600;
  color:var(--color-text-primary);
  margin:0;
}
.service-caveat{
  font-size:11px;
  font-style:italic;
  color:var(--color-text-secondary);
  margin:3px 0 0;
}
.service-actions{
  display:flex;
  gap:7px;
  flex:0 0 auto;
}
.btn-info,
.btn-buchen{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  padding:7px 13px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
}
.btn-info{
  background:#ffffff;
  color:var(--color-text-primary);
  border:1.2px solid #dcdcdc;
}
.btn-buchen{
  background:#1a1a1a;
  color:#ffffff;
  border:1.2px solid #1a1a1a;
}
.btn-buchen.is-open{ background:#ffffff; color:#1a1a1a; }

/* ---- Options-Panel ---- */
.options-panel{
  display:none;
  margin-top:16px;
  padding-top:4px;
  border-top:1px solid var(--color-hairline);
}
.options-panel.is-open{ display:block; }

.option-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--color-hairline);
}
.option-row:last-child{ border-bottom:none; }

.option-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.option-name{
  font-size:14px;
  font-weight:600;
  color:var(--color-text-primary);
  margin:0;
}
.option-variant,
.option-desc{
  font-size:12px;
  font-weight:600;
  color:var(--rose);
  line-height:1.35;
  margin:3px 0 0;
}
.option-caveat{
  font-size:10.5px;
  font-style:italic;
  color:var(--color-text-secondary);
  line-height:1.35;
  margin:3px 0 0;
}
.option-right{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.option-price{
  font-size:13.5px;
  font-weight:700;
  color:var(--wine);
  white-space:nowrap;
  margin:0;
  text-align:right;
}
.btn-waehlen{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  background:var(--color-accent);
  color:#1a1a1a;
  border:none;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  display:inline-block;
  transition:filter .18s ease;
}
.btn-waehlen:hover{ filter:brightness(.94); }

/* ---- Abgestuftes Farbkonzept pro Karte ---- */
.btn-buchen.rose-level-1{ background:rgba(194,75,102,0.22); color:#1a1a1a; border-color:rgba(194,75,102,0.22); }
.btn-waehlen.rose-level-1{ background:rgba(194,75,102,0.22); color:#1a1a1a; }
.btn-waehlen.rose-level-2{ background:rgba(194,75,102,0.48); color:#1a1a1a; }
.btn-waehlen.rose-level-3{ background:rgba(194,75,102,0.74); color:#1a1a1a; }
.btn-waehlen.rose-level-4{ background:#C24B66; color:#1a1a1a; }

.btn-buchen.orange-level-1{ background:rgba(217,113,79,0.22); color:#1a1a1a; border-color:rgba(217,113,79,0.22); }
.btn-waehlen.orange-level-1{ background:rgba(217,113,79,0.22); color:#1a1a1a; }
.btn-waehlen.orange-level-2{ background:rgba(217,113,79,0.48); color:#1a1a1a; }
.btn-waehlen.orange-level-3{ background:rgba(217,113,79,0.74); color:#1a1a1a; }
.btn-waehlen.orange-level-4{ background:#D9714F; color:#1a1a1a; }

.btn-buchen.green-level-1{ background:rgba(169,190,92,0.28); color:#1a1a1a; border-color:rgba(169,190,92,0.28); }
.btn-waehlen.green-level-1{ background:rgba(169,190,92,0.28); color:#1a1a1a; }
.btn-waehlen.green-level-4{ background:var(--green); color:#1a1a1a; }

.btn-buchen.blue-level-1{ background:rgba(91,155,213,0.22); color:#1a1a1a; border-color:rgba(91,155,213,0.22); }
.btn-waehlen.blue-level-1{ background:rgba(91,155,213,0.22); color:#1a1a1a; }
.btn-waehlen.blue-level-2{ background:rgba(91,155,213,0.5); color:#1a1a1a; }
.btn-waehlen.blue-level-3{ background:#3D84C4; color:#1a1a1a; }

.option-variant.accent-coral,
.option-desc.accent-coral{ color:var(--coral); }
.option-desc.accent-green{ color:var(--green); }
.option-desc.accent-blue{ color:var(--blue); }

/* ---- Info-Popup ---- */
.info-modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  z-index:80;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.info-modal-overlay.is-open{ display:flex; }
.info-modal{
  background:#ffffff;
  border-radius:14px;
  padding:22px;
  max-width:340px;
  width:100%;
  max-height:80vh;
  overflow-y:auto;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.info-modal-title{
  font-size:15px;
  font-weight:700;
  color:var(--color-text-primary);
  margin:0 0 10px;
}
.info-modal-text{
  font-size:12.5px;
  font-style:italic;
  color:var(--color-text-secondary);
  line-height:1.5;
  margin:0 0 16px;
}
.info-modal-close{
  display:block;
  margin-left:auto;
  background:#1a1a1a;
  color:#ffffff;
  border:none;
  border-radius:999px;
  padding:9px 18px;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}

.legal-note{
  font-size:10.5px;
  color:var(--color-muted);
  text-align:center;
  padding:0 var(--page-pad);
  margin-top:36px;
  line-height:1.5;
}

/* ==========================================================================
   Bestätigungsseite
   ========================================================================== */
.confirmation-heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:30px;
  color:var(--color-text-primary);
  text-align:center;
  margin:32px 0 24px;
}
.confirmation-text{
  font-size:14px;
  color:var(--color-text-primary);
  line-height:1.6;
  text-align:center;
  margin:0 0 6px;
}
.confirmation-note{
  font-size:12.5px;
  color:var(--color-text-secondary);
  line-height:1.5;
  text-align:center;
  margin:0 0 28px;
}
.whatsapp-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 22px;
  border-radius:999px;
  border:1.3px solid var(--color-accent);
  color:var(--color-accent);
  font-size:14.5px;
  font-weight:600;
  text-decoration:none;
  margin:14px 0 18px;
  transition:background-color .18s ease, color .18s ease;
}
.whatsapp-btn:hover{ background:var(--color-accent); color:#fff; }
.whatsapp-btn svg{ width:18px; height:18px; display:block; }

.action-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:26px 0 8px;
}
.action-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 22px;
  border-radius:999px;
  border:1.3px solid var(--color-accent);
  color:var(--color-accent);
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.action-btn:hover{ background:var(--color-accent); color:#fff; }
.action-btn svg{ width:17px; height:17px; display:block; }
.action-btn.solid{
  background:var(--color-accent);
  color:#fff;
}
.action-btn.solid:hover{ filter:brightness(.93); }

/* ==========================================================================
   Kontaktseite
   ========================================================================== */
.contact-block{
  text-align:center;
  padding:0 var(--page-pad);
}
.contact-portrait{
  display:block;
  width:132px;
  height:132px;
  object-fit:cover;
  border-radius:50%;
  margin:2px auto 22px;
  box-shadow:0 10px 26px -10px rgba(92,35,64,.45);
}
.contact-name{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  color:var(--plum-ink);
  margin:0 0 12px;
}
.contact-line{
  font-size:13.5px;
  color:var(--color-text-primary);
  line-height:1.6;
  margin:0 0 4px;
}
.contact-line a{ color:var(--color-accent); text-decoration:none; }
.contact-line a:hover{ text-decoration:underline; }
.contact-hint{
  font-size:12.5px;
  font-style:italic;
  color:var(--color-text-secondary);
  line-height:1.5;
  margin:16px auto 0;
  max-width:420px;
}

/* ==========================================================================
   Rechtstexte (AGB / Datenschutz)
   ========================================================================== */
.legal{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--page-pad);
}
.legal h1{
  font-family:var(--font-display);
  font-weight:400;
  font-size:28px;
  text-align:center;
  margin:0 0 10px;
}
.legal .legal-updated{
  font-size:12px;
  color:var(--color-text-secondary);
  text-align:center;
  margin:0 0 32px;
}
.legal .legal-lead{
  font-size:13.5px;
  line-height:1.6;
  text-align:center;
  margin:0 0 32px;
}
.legal ol{
  list-style:none;
  counter-reset:legal;
}
.legal ol > li{
  counter-increment:legal;
  margin-bottom:26px;
}
.legal ol > li > h2{
  font-size:14.5px;
  font-weight:700;
  color:var(--color-text-primary);
  margin:0 0 8px;
  display:flex;
  gap:10px;
  align-items:baseline;
}
.legal ol > li > h2::before{
  content:counter(legal) ".";
  color:var(--rose);
  font-weight:700;
  flex:0 0 auto;
}
.legal p{
  font-size:13px;
  line-height:1.65;
  color:#333;
  margin:0 0 8px;
}
.legal ul{
  margin:8px 0 8px 18px;
}
.legal ul li{
  font-size:13px;
  line-height:1.65;
  color:#333;
  margin-bottom:6px;
}
.legal a{ color:var(--color-accent); }

/* ==========================================================================
   Abstandshalter + Footer
   ========================================================================== */
.content-spacer{ height:160px; }
.content-spacer.tall{ height:200px; }
.content-spacer.xtall{ height:380px; }

.site-footer{
  flex:0 0 auto;
  background:var(--color-footer-bg);
  box-shadow:0 -1px 0 var(--color-hairline), 0 -2px 6px -2px rgba(0,0,0,0.06);
  padding:22px 20px 26px;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:14px;
}
.footer-col{ flex:1; min-width:0; }
.footer-name{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  color:var(--plum-ink);
  margin:0 0 6px;
}
.footer-text{
  font-size:11.5px;
  line-height:1.5;
  color:#4a4a4a;
  margin:0 0 3px;
}
.footer-email{
  display:inline-block;
  margin-top:3px;
  font-size:11.5px;
  color:#2a2a2a;
  text-decoration:underline;
}
.footer-links{
  display:flex;
  flex-direction:column;
  gap:7px;
  align-items:flex-end;
  text-align:right;
}
.footer-links a{
  font-size:12px;
  font-weight:500;
  color:var(--color-accent);
  text-decoration:none;
}
.footer-links a:hover{ text-decoration:underline; }
.footer-copy{
  margin-top:10px;
  font-size:10.5px;
  color:#9a9a9a;
}

/* Footer auf dem Farbverlauf (Startseite) */
.site-footer.on-gradient{
  background:var(--color-footer-bg);
  box-shadow:none;
}

/* ==========================================================================
   Cookie-Hinweis (zentrierter Dialog, wird von js/analytics.js gesteuert)
   Aufbau bewusst wie die Info-Popups der Buchungsseite, damit er nicht
   wie ein Fremdkörper wirkt.
   ========================================================================== */
.cookie-hinweis{
  display:none;
  position:fixed;
  inset:0;
  z-index:85;
  background:rgba(0,0,0,0.42);
  align-items:center;
  justify-content:center;
  padding:24px;
}
.cookie-hinweis.is-open{ display:flex; }

.cookie-inner{
  background:var(--cream);
  border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
  padding:24px 22px 20px;
  max-width:340px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  text-align:center;
  animation:cookie-auf .26s ease both;
}
@keyframes cookie-auf{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .cookie-inner{ animation:none; }
}

.cookie-titel{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:500;
  color:var(--plum-ink);
  margin:0 0 10px;
}
.cookie-text{
  font-size:12.5px;
  line-height:1.6;
  color:#4a4a4a;
  margin:0 0 18px;
}
.cookie-text a{
  color:var(--color-accent);
  text-decoration:underline;
  text-underline-offset:2px;
}

.cookie-aktionen{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
}
.cookie-btn{
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  padding:11px 22px;
  border-radius:999px;
  border:1.3px solid var(--color-accent);
  background:none;
  color:var(--color-accent);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.cookie-btn:hover{ background:var(--color-accent); color:#fff; }
.cookie-btn.solid{
  background:var(--color-accent);
  color:#fff;
}
.cookie-btn.solid:hover{ filter:brightness(.93); }

/* "Cookie-Einstellungen" im Footer */
.cookie-link{
  background:none;
  border:0;
  padding:0;
  font-family:inherit;
  font-size:12px;
  font-weight:500;
  color:var(--color-accent);
  cursor:pointer;
}
.cookie-link:hover{ text-decoration:underline; }

@media (min-width:834px){
  .cookie-inner{ max-width:400px; padding:28px 26px 24px; }
  .cookie-titel{ font-size:22px; }
  .cookie-text{ font-size:13.5px; }
  .cookie-aktionen{ flex-direction:row; justify-content:center; }
  .cookie-btn{ flex:1; }
  .cookie-link{ font-size:14px; }
}

/* ==========================================================================
   Sichtbarkeit nur für Screenreader
   ========================================================================== */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ==========================================================================
   iPad / Desktop — Werte der iPad-Vorlage
   ========================================================================== */
@media (min-width:834px){
  :root{ --page-pad:34px; }

  .page-header{ height:82px; }
  .page-header .logo-mark{ height:66px; }
  .menu-icon{ width:32px; height:22px; }
  .menu-icon span{ height:2.5px; }
  body.nav-open .menu-icon span:nth-child(1){ transform:translateY(9.75px) rotate(45deg); }
  body.nav-open .menu-icon span:nth-child(3){ transform:translateY(-9.75px) rotate(-45deg); }

  .nav-overlay a{ font-size:38px; }
  .nav-overlay li{ margin-bottom:26px; }

  .startseite .menu-icon{ top:22px; right:56px; }
  body.startseite.nav-open .menu-icon span:nth-child(1){ transform:translateY(9.75px) rotate(45deg); }
  body.startseite.nav-open .menu-icon span:nth-child(3){ transform:translateY(-9.75px) rotate(-45deg); }

  /* ---- Hero ---- */
  .hero{
    padding:44px 7% 52px;
    min-height:0;
    height:min(56vh, 420px);
    justify-content:center;
  }
  .hero-brand{ margin-bottom:34px; }
  .hero-brand img{ width:128px; max-width:128px; }
  .hero-title{ font-size:50px; margin-bottom:34px; }
  .btn-stack{
    flex-direction:row;
    justify-content:center;
    gap:16px;
  }
  .btn{
    width:auto;
    min-width:190px;
    max-width:none;
    padding:16px 30px;
    font-size:17px;
  }

  /* ---- Foto-Reihe: zentrierter Ausschnitt, ~4,5 Bilder sichtbar ---- */
  .nailart-section{ padding:15px 0 28px; }
  .nailart-header{
    width:min(739px, 100%);
    margin:0 auto 14px;
    padding:0 10px;
  }
  .nailart-swipe{ font-size:14px; }
  .nailart-scroll{
    gap:16px;
    width:min(739px, 100%);
    margin:0 auto;
    padding:0 10px 4px;
  }
  .nailart-scroll::after{ content:""; flex:0 0 160px; }
  .nailart-card{ width:150px; }
  .nailart-card img{ width:150px; height:187px; }
  .nailart-more{ width:172px; height:187px; gap:11px; }
  .nailart-more svg{ width:32px; height:32px; }
  .nailart-more span{ font-size:13.5px; }
  .gradient-spacer{ height:165px; }

  /* ---- Inhaltsseiten ---- */
  .page-title{ font-size:38px; padding:34px var(--page-pad) 4px; }
  .page-title.with-meta{ padding-bottom:18px; }
  .page-meta{ padding-bottom:42px; }
  .page-meta p{ font-size:14px; }
  .page-content{ padding:0 30px 8px; }

  .pinterest-text{ font-size:13.5px; }
  .pinterest-btn{ font-size:12.5px; padding:6px 16px; }

  /* Preisliste */
  .price-category-title .title-badge{
    font-size:14.5px;
    letter-spacing:.7px;
    padding:11px 26px;
  }
  .price-name{ font-size:17px; }
  .price-duration{ font-size:13px; }
  .price-variant{ font-size:14.5px; }
  .price-desc, .price-caveat{ font-size:13px; }
  .price-value{ font-size:19px; }
  .price-note{ font-size:13px; }

  /* Buchung */
  .booking-meta .detail{ font-size:13.5px; }
  .service-name{ font-size:17px; }
  .service-caveat{ font-size:12.5px; }
  .btn-info, .btn-buchen{ font-size:13.5px; padding:8px 16px; }
  .btn-waehlen{ font-size:13.5px; padding:8px 17px; }
  .option-name{ font-size:15.5px; }
  .option-variant, .option-desc{ font-size:13.5px; }
  .option-caveat{ font-size:12px; }
  .option-price{ font-size:15.5px; }
  .service-card{ padding:20px; }
  .legal-note{ font-size:12px; }

  /* Bestätigung */
  .confirmation-heading{ font-size:36px; margin:44px 0 26px; }
  .confirmation-text{ font-size:16px; }
  .confirmation-note{ font-size:14px; }

  /* Kontakt */
  .contact-portrait{ width:160px; height:160px; margin-bottom:26px; }
  .contact-name{ font-size:26px; }
  .contact-line{ font-size:15px; }
  .contact-hint{ font-size:14px; }

  /* Rechtstexte */
  .legal h1{ font-size:34px; }
  .legal ol > li > h2{ font-size:16.5px; }
  .legal p, .legal ul li{ font-size:14.5px; }
  .legal .legal-lead{ font-size:15px; }

  /* Footer volle Breite, Inhalt zentriert */
  .content-spacer{ height:160px; }
  .content-spacer.tall{ height:260px; }
  .content-spacer.xtall{ height:420px; }

  .site-footer{
    padding:30px var(--page-pad) 40px;
  }
  .footer-inner{
    max-width:980px;
    margin:0 auto;
    width:100%;
    gap:40px;
  }
  .footer-name{ font-size:19px; margin-bottom:8px; }
  .footer-text{ font-size:14px; line-height:1.6; margin-bottom:4px; }
  .footer-email{ font-size:14px; margin-top:4px; }
  .footer-links{ gap:9px; }
  .footer-links a{ font-size:14px; }
  .footer-copy{ margin-top:12px; font-size:12px; }
}

/* Sehr schmale Geräte */
@media (max-width:360px){
  :root{ --page-pad:16px; }
  .hero-title{ font-size:40px; }
  .service-actions{ gap:5px; }
  .btn-info, .btn-buchen{ padding:7px 10px; font-size:11.5px; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}