:root{
  /* Farben & Fonts */
  --primary:#678E99;
  --secondary:#597E92;
  --accent:#2E4F56;
  --bg:#FCFCFC;
  --font-sans:'Open Sans',sans-serif;
  --font-serif:'Merriweather',serif;

  /* Typo-Scale (mobil optimiert, Honor 200 Pro friendly) */
  --fs-base: clamp(16px, 2.9vw, 19px);           /* Fließtext */
  --lh-base: 1.6;

  --fs-h1: clamp(28px, 6.6vw, 34px);
  --fs-h2: clamp(22px, 5.4vw, 28px);
  --fs-h3: clamp(18px, 4.3vw, 22px);

  --fs-hero: clamp(28px, 7.2vw, 40px);           /* Hero-Headline */
}

/* Verhindert Auto-Text-Zoom / Font Boosting auf Mobil */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* Reset & base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  display:flex;flex-direction:column;min-height:100vh;
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  line-height:var(--lh-base);
  background:var(--bg);color:var(--accent);
  position:relative;z-index:0;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}
body::before{
  content:""; position:fixed; inset:0;
  background:url('../img/background/flower.png') center/cover no-repeat;
  opacity:.08; z-index:-1;   /* etwas dezenter */
}
body.imprint::before{background:none}

/* Accessibility */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;z-index:1000;
  background:#fff;color:#000;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* Headings */
h1,h2,h3,h4,h5,h6{font-family:var(--font-serif);margin-bottom:.75rem}
h1{font-size:var(--fs-h1);line-height:1.25}
h2{font-size:var(--fs-h2);line-height:1.28}
h3{font-size:var(--fs-h3);line-height:1.3}

/* Navbar */
.navbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--primary);padding:.5rem .9rem;position:sticky;top:0;z-index:10;
}
.logo img{height:56px;display:block}
.nav-wrapper{position:relative}
.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-width:96px;
  padding:.5rem .75rem;border:0;border-radius:.5rem;background:rgba(255,255,255,.15);
  color:#fff;font-size:1rem;font-weight:700;cursor:pointer;
}

/* Dropdown Menu */
.nav-dropdown{
  list-style:none;position:absolute;right:0;top:calc(100% + .4rem);
  min-width:220px;background:#fff;color:var(--accent);
  border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.15);
  padding:.4rem 0;display:none;max-height:70vh;overflow:auto;
}
.nav-dropdown.open{display:block}
.nav-dropdown a{
  display:block;padding:.6rem .9rem;text-decoration:none;color:var(--accent);font-weight:700;
}
.nav-dropdown a:hover, .nav-dropdown a:focus{ background:rgba(103,142,153,.1) }
.nav-dropdown a[aria-current="page"]{ background:rgba(103,142,153,.15) }

/* Desktop: optional Hover-Open */
@media (hover: hover) and (min-width: 900px){
  .nav-wrapper:hover .nav-dropdown{display:block}
  .nav-wrapper:hover .menu-toggle{background:rgba(255,255,255,.25)}
}

/* Hero */
.hero{
  background:url('../img/hero.jpg') center/cover no-repeat;
  min-height: 28vh; display:flex; align-items:center; justify-content:center; padding:6vh 1rem;
}
.hero h1{
  font-size: var(--fs-hero); text-align:center; color:var(--primary);
  text-shadow:-0.25px -0.25px 0 #000, 0.25px -0.25px 0 #000, -0.25px 0.25px 0 #000, 0.25px 0.25px 0 #000;
  -webkit-text-stroke: 0.2px #000;
}

/* Main */
main{flex:1;padding:0.75rem 1rem 1.5rem}
p, li{margin-bottom:.7rem}

/* Intro text */
.intro-text{text-align:center}

/* Two-column sections */
.two-col{
  display:grid;grid-template-columns:1fr;gap:1rem;max-width:1100px;margin:1.6rem auto;padding:0 1rem;
}
.two-col .image-col img{width:100%;height:auto;border-radius:8px;display:block}
.two-col .text-col{text-align:left}
@media (min-width: 900px){
  .two-col{grid-template-columns:1fr 1fr;gap:2rem}
}

/* ===========================
   SERVICES – modernes Design
   =========================== */
#services h2{
  text-align:center;margin-bottom:1rem;
}

.service-grid{
  --cols: 1;
  display:grid; gap:1rem;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  max-width:1100px; margin:0 auto; padding:0 1rem;
}
@media (min-width:560px){ .service-grid{ --cols: 2; } }
@media (min-width:960px){ .service-grid{ --cols: 3; } }

.service-card, .service-note{
  background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.08);
  padding:1rem; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  outline:none;
}
.service-card:focus-within,.service-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.12) }
.service-note{
  border:2px dashed var(--secondary); background:var(--bg);
  grid-column:1 / -1; text-align:center; font-style:italic;
}

.service-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.4rem;
}
.service-head h3{margin:0;color:var(--primary)}
.badge{
  display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.9em;
  background:rgba(89,126,146,.12);color:var(--secondary);white-space:nowrap;
}
.service-desc{ margin:.35rem 0 .6rem 0 }
.price{ margin-top:auto; font-weight:800; font-size:1.05em; color:var(--accent) }

/* ===== Services – Aufklappbare Details ===== */
.service-more summary{
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.35rem .65rem;
  margin:.25rem 0 .5rem;
  border-radius:999px;
  background:rgba(89,126,146,.10);
  color:var(--secondary);
  font-weight:700;
  outline:0;
}
.service-more summary::marker{ content:""; }
.service-more summary::-webkit-details-marker{ display:none; }
.service-more summary::after{
  content:"▾";
  transform:translateY(1px);
  transition:transform .2s ease;
  font-weight:900;
}
.service-more[open] summary::after{
  transform:rotate(180deg) translateY(-1px);
}
.service-more > *:not(summary){
  opacity:.0;
  max-height:0;
  overflow:hidden;
  transition:opacity .22s ease, max-height .22s ease;
}
.service-more[open] > *:not(summary){
  opacity:1;
  max-height:500px;
}
.service-card .price{ margin-top:.5rem; }
@media (max-width: 640px){
  .service-card .service-desc{ margin-bottom:.25rem; }
  .service-more summary{ margin-top:.25rem; }
}

/* Add-on optische Absetzung */
.service-card.addon{
  background:linear-gradient(0deg, rgba(89,126,146,.07), rgba(89,126,146,.07)) , #fff;
  border:1px solid rgba(89,126,146,.18);
}

/* Tabellen (Öffnungszeiten) */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;margin-bottom:1rem;min-width: 420px}
th,td{padding:.6rem;border:1px solid var(--accent)}
th{background:var(--secondary);color:#fff;text-align:left}

/* Kontaktseite */
#contact{text-align:center;max-width:700px;margin:2rem auto;padding:0 1rem}
#contact h1,#contact h2{margin-bottom:1rem}
#contact p{margin:.5rem 0}
.map-embed iframe{ display:block;margin:1.25rem auto 0;width:100%;height:360px;border:0;border-radius:8px }
@media (min-width: 700px){ .map-embed iframe{height:450px} }

/* Links in contact info */
.contact-info a{color:var(--accent);text-decoration:none}

/* Footer */
footer{ background:var(--primary);color:#fff;text-align:center;padding:1rem;margin-top:auto }
footer small{font-size:.9em}

/* Performance tweak für mobile BG */
@media (max-width: 899px){ body::before{position:absolute} }

/* ===========================
   MOBILE-FEINTUNING
   =========================== */
@media (max-width: 640px){
  .service-grid{ --cols:1; grid-template-columns:1fr !important; }
  .service-head{ flex-direction:column; align-items:flex-start; gap:.25rem; }
  .badge{
    align-self:flex-start; padding:.15rem .55rem; font-size:.95em;
    line-height:1.2; max-width:100%; white-space:normal;
  }
  .service-head h3{ word-break:break-word; hyphens:auto; margin-bottom:0; }
}
@media (max-width: 400px){
  .service-card, .service-note{ padding:.85rem }
  .badge{ font-size:.9em }
}

/* ===== Öffnungszeiten – Mobile & Desktop Optimierung ===== */
@media (min-width: 641px){
  #hours table{
    table-layout: fixed;
    width: 100%;
  }
  #hours th{ width: 40%; }
  #hours td{ width: 60%; }
}
@media (max-width: 640px){
  #hours .table-responsive{ overflow: visible; }
  #hours table{
    min-width: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .8rem;
  }
  #hours tr{ display: block; }
  #hours th,
  #hours td{
    display: block;
    border: 0;
    padding: .9rem 1rem;
  }
  #hours th{
    background: var(--secondary);
    color: #fff;
    border-radius: 12px 12px 0 0;
  }
  #hours td{
    background: #fff;
    border: 1px solid rgba(46,79,86,.25);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  #hours td{ line-height: 1.55; }
}
#services h1, 
#services h2 {
  text-align: center;
}
/* ===== CTA: Anwendungen-Button ===== */
.cta-apps{
  max-width: 1000px; margin: 2rem auto; padding: 0 1rem; text-align: center;
}
.cta-apps h2{ margin-bottom: .25rem; }
.cta-sub{ margin-bottom: .75rem; opacity: .9; }
.cta-actions{ margin-top: .25rem; }
.btn-primary{
  display: inline-block;
  padding: .85rem 1.25rem;
  background: var(--secondary);
  color:#fff; text-decoration: none; font-weight: 800; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover, .btn-primary:focus{
  transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.16);
  background: #5e8aa0;
}

/* ===== Reviews (3 Karten) ===== */
.reviews{
  max-width: 1100px; margin: 2rem auto; padding: 0 1rem;
}
.reviews h2{ text-align: center; margin-bottom: 1rem; }
.reviews-grid{
  --cols: 1;
  display:grid; gap:1rem;
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
}
@media (min-width: 700px){ .reviews-grid{ --cols: 3; } }

.review-card{
  background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08);
  border:1px solid rgba(46,79,86,.15);
  padding:1rem; display:flex; flex-direction:column; gap:.5rem;
}
.review-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.review-name{ font-size: 1.05em; margin:0; color: var(--primary); }
.stars{ font-size: 1.05em; letter-spacing: 1px; color:#f5b301; } /* ★★★★☆ */
.review-text{ margin: .25rem 0 0; }

/* ===== Instagram Button ===== */
.instagram-cta{
  max-width: 1000px; margin: 2rem auto 2.5rem; padding: 0 1rem; text-align: center;
}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ig-actions{ margin: .5rem 0 0; }
.ig-button{
  display:inline-flex; align-items:center; gap:.75rem;
  background:#fff; border-radius: 999px; padding: .65rem 1rem;
  border:1px solid rgba(46,79,86,.15);
  text-decoration:none; color:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ig-button:hover, .ig-button:focus{
  transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.14);
  background:#fafafa;
}
.ig-logo{ width:28px; height:28px; display:block; }
.ig-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
.ig-handle{ font-weight:800; }
.ig-sub{ font-size:.92em; opacity:.85; }
.ig-caption{ margin-top:.6rem; }

/* Kleines Tuning: Abstand nach den großen Sektionen */
.cta-apps, .reviews, .instagram-cta{ scroll-margin-top: 72px; }