/* Schriften liegen lokal im Ordner "schriften" – es wird keine Verbindung
   zu Google aufgebaut. Lizenz: SIL Open Font License 1.1 (beide Schriften).
   Es sind variable Schriften: eine Datei deckt alle Strichstaerken ab. */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:300 700;
  font-display:swap;
  src:url('schriften/cormorant-400-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('schriften/cormorant-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('schriften/jost-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
   Lubna – Med. Fußpflege & Kosmetik, Fürth
   Schlicht, hell, viel Luft. Eine Akzentfarbe, feine Linien.
   ========================================================= */

:root{
  --creme:      #fcfbfa;   /* fast weiss, minimal warm */
  --creme-warm: #f4f2f0;   /* neutrales Hellgrau statt Beige */
  --blush:      #f2e7e5;   /* zarter Rose-Ton, nur als Akzent */
  --rose:       #b06d6e;   /* Logofarbe – bleibt */
  --rose-dunkel:#8f5455;
  --gold:       #b08d57;
  --tief:       #201e20;   /* Graphit: Aktionsleiste, Zitat, Fuss */
  --tinte:      #262325;
  --tinte-weich:#5b565a;
  --weiss:      #ffffff;
  --wa:         #1c8449;
  --wa-dunkel:  #145f36;

  --haar:       rgba(38,35,37,.13);   /* Haarlinie */
  --haar-zart:  rgba(38,35,37,.075);

  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:  "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --breite: 1120px;
}

/* Die Seite hat ein festes helles Erscheinungsbild (Markenfarben).
   Das verhindert, dass ein Dunkelmodus die Farben verfaelscht. */
:root{ color-scheme:light; }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--creme);
  color:var(--tinte);
  font-family:var(--sans);
  font-weight:400;
  font-size:1.09rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Zahlen als normale Ziffern – wichtig fuer die Preise */
h1,h2,h3,h4,.hero-badge-zahl,.leistung-nr,.leistung-preis,
.preisliste b,.kachel span,.marke-name,.fuss-name{
  font-variant-numeric: lining-nums;
  font-feature-settings:"lnum" 1;
}
.preisliste b{
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--rose-dunkel); text-decoration:none; }
a:hover{ color:var(--tinte); }
::selection{ background:var(--blush); color:var(--tinte); }
:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:28px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinte); color:#fff; padding:12px 20px; }
.skip:focus{ left:12px; top:12px; color:#fff; }

/* ---------- Typografie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:400; color:var(--tinte);
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.7rem,5.6vw,4.15rem); line-height:1.06; letter-spacing:-.012em; }
h1 em{ font-style:italic; color:var(--rose); }
h2{ font-size:clamp(2.05rem,3.8vw,2.85rem); line-height:1.15; letter-spacing:-.008em; }
h3{ font-size:1.4rem; line-height:1.3; }
h4{ font-size:1.1rem; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-size:.78rem; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--rose-dunkel); margin:0 0 1.2em;
}
.lead{ font-size:1.15rem; color:var(--tinte-weich); max-width:33em; }

/* Abschnittskopf – immer gleich aufgebaut */
.kopfzeile{ max-width:40em; margin:0 0 clamp(40px,5vw,68px); }
.kopfzeile h2{ margin-bottom:.45em; }
.einleitung{ color:var(--tinte-weich); margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-size:.92rem; letter-spacing:.04em;
  padding:.9em 1.7em; border-radius:999px; border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
  white-space:nowrap;
}
.btn svg{ width:1.15em; height:1.15em; fill:currentColor; flex:none; }
.btn-gross{ font-size:1rem; padding:1.05em 2.1em; }
.btn-wa{ background:var(--wa); color:#fff; }
.btn-wa:hover{ background:var(--wa-dunkel); color:#fff; transform:translateY(-1px); }
.btn-linie{ background:transparent; color:var(--tinte); border-color:var(--haar); }
.btn-linie:hover{ background:var(--tinte); color:#fff; border-color:var(--tinte); }

/* ---------- Aktionsleiste ganz oben ---------- */
.aktion{ background:var(--tief); }
.aktion a{
  display:flex; align-items:center; justify-content:center;
  gap:.6em 1em; flex-wrap:wrap;
  padding:12px 24px; color:#fff; text-align:center;
  font-size:.92rem; letter-spacing:.02em;
}
.aktion a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.aktion strong{
  font-family:var(--serif); font-weight:500; font-size:1.06rem;
  letter-spacing:.02em;
}
.aktion span{ color:rgba(255,255,255,.9); }
.aktion em{
  font-style:normal; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px;
}

/* ---------- Aktionskasten bei den Preisen ---------- */
.preis-aktion{
  margin-top:clamp(34px,4vw,52px);
  background:var(--weiss); border:1px solid var(--rose);
  border-radius:3px; padding:32px 36px; text-align:center;
}
.preis-aktion-titel{
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rose-dunkel); margin-bottom:.9em;
}
.preis-aktion p:not(.preis-aktion-titel){
  color:var(--tinte-weich); max-width:34em; margin-inline:auto;
}
.preis-aktion strong{ color:var(--tinte); font-weight:500; }
.preis-aktion .btn{ margin-top:1.5em; }

/* ---------- Kopf ---------- */
.kopf{
  position:sticky; top:0; z-index:100;
  background:rgba(252,251,250,.93);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--haar-zart);
}
.kopf-inner{ display:flex; align-items:center; gap:30px; min-height:82px; }
.marke{ display:flex; align-items:center; gap:12px; color:var(--tinte); margin-right:auto; }
.marke-zeichen{ width:32px; }
.marke-text{ display:flex; flex-direction:column; line-height:1; }
.marke-name{
  font-family:var(--serif); font-size:1.5rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
}
.marke-sub{
  font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rose-dunkel); margin-top:6px;
}
.nav{ display:flex; gap:30px; }
.nav a{ font-size:.9rem; letter-spacing:.02em; color:var(--tinte-weich); padding:4px 0; position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--rose); transition:right .3s;
}
.nav a:hover{ color:var(--tinte); }
.nav a:hover::after{ right:0; }
.kopf-tel{
  font-size:.88rem; letter-spacing:.05em; color:var(--tinte);
  padding-left:30px; border-left:1px solid var(--haar);
}

.burger{ display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer; padding:11px 10px; }
.burger span{ display:block; height:1.5px; background:var(--tinte); border-radius:2px;
  transition:transform .3s, opacity .2s; }
.burger span+span{ margin-top:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobilnav{ display:none; flex-direction:column;
  border-top:1px solid var(--haar-zart); background:var(--creme); }
.mobilnav a{ padding:16px 28px; border-bottom:1px solid var(--haar-zart);
  color:var(--tinte); font-size:1rem; }
.mobilnav.offen{ display:flex; }
/* Ersatz-Navigation, falls kein JavaScript laeuft – nur auf schmalen
   Bildschirmen noetig, weil dort sonst nur der Menueknopf da waere. */
.mobilnav-fest{ display:none; }
@media (max-width:860px){ .mobilnav-fest{ display:flex; } }

/* ---------- Hero ---------- */
.hero{ padding:clamp(52px,7vw,104px) 0 clamp(60px,7vw,110px); }
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,6vw,86px); align-items:center;
}
.hero-text .lead{ margin-top:1.7rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.5rem; }
.hero-hinweis{ margin-top:1.2rem; font-size:.84rem; color:var(--tinte-weich); letter-spacing:.02em; }

.hero-bild{ position:relative; }
.hero-bild img{
  width:100%; border-radius:290px 290px 10px 10px;
  object-fit:cover; aspect-ratio:9/13;
  box-shadow:0 30px 70px -40px rgba(38,35,37,.4);
}
.hero-badge{
  position:absolute; left:-20px; bottom:42px;
  background:var(--weiss); border:1px solid var(--haar-zart); border-radius:999px;
  padding:15px 22px; display:flex; align-items:center; gap:13px;
  box-shadow:0 16px 40px -24px rgba(38,35,37,.45);
}
.hero-badge-zahl{ font-family:var(--serif); font-size:2.05rem; line-height:1; color:var(--rose); }
.hero-badge-text{ font-size:.72rem; letter-spacing:.17em; text-transform:uppercase;
  line-height:1.5; color:var(--tinte-weich); }

/* ---------- Fakten ---------- */
.fakten{ border-block:1px solid var(--haar-zart); background:var(--creme-warm); }
.fakten-grid{ display:grid; grid-template-columns:repeat(3,1fr); }
.fakten-grid > div{ padding:36px 30px 36px 0; display:flex; flex-direction:column; gap:5px; }
.fakten-grid > div + div{ padding-left:34px; border-left:1px solid var(--haar-zart); }
.fakten-grid strong{ font-family:var(--serif); font-size:1.2rem; font-weight:500; }
.fakten-grid span{ font-size:.87rem; color:var(--tinte-weich); line-height:1.6; }

/* ---------- Abschnitte ---------- */
.abschnitt{ padding:clamp(70px,9vw,126px) 0; }
.abschnitt-hell{ background:var(--creme-warm); border-block:1px solid var(--haar-zart); }

/* ---------- Leistungen (typografische Liste) ---------- */
.leistungen{ border-top:1px solid var(--haar); }
.leistung{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(20px,4vw,44px); align-items:start;
  padding:32px 4px; border-bottom:1px solid var(--haar);
  transition:background .3s, padding-left .3s;
}
.leistung:hover{ background:rgba(242,231,229,.45); padding-left:16px; }
.leistung-nr{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.1em;
  color:var(--rose-dunkel); padding-top:.5em; min-width:2.2em;
}
.leistung h3{ margin-bottom:.3em; }
.leistung p{ font-size:.98rem; color:var(--tinte-weich); max-width:52em; margin:0; }

.leistungen-fuss{ margin-top:34px; }
.leistungen-fuss a{
  font-size:.92rem; letter-spacing:.03em; color:var(--rose-dunkel);
  border-bottom:1px solid var(--blush); padding-bottom:3px;
}
.leistungen-fuss a:hover{ border-color:var(--rose); }

/* ---------- Einblicke / Galerie ---------- */
.galerie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.galerie-wenig .galerie{ max-width:760px; margin-inline:auto; }
.galerie figure{ margin:0; }
.galerie img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:3px; box-shadow:0 20px 44px -34px rgba(38,35,37,.45);
}
.galerie figcaption{
  margin-top:12px; font-size:.82rem; letter-spacing:.02em; color:var(--tinte-weich);
}

/* ---------- Zitat ---------- */
.zitat{
  background:var(--tief); color:#fff;
  padding:clamp(64px,8vw,112px) 0; text-align:center;
}
.zitat-zeichen{
  width:52px; margin:0 auto 28px;
  filter:brightness(0) invert(1); opacity:.55;
}
.zitat blockquote{
  margin:0 auto; max-width:18em;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.35;
  color:#fff;
}
.zitat-name{
  margin-top:1.9em; font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}

/* ---------- Preise ---------- */
.preis-spalten{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4vw,54px); }
.preis-block-breit{ grid-column:1 / -1; }
.preis-block h3{
  font-size:1.3rem; padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid var(--rose);
}
.preisliste{ list-style:none; margin:0; padding:0; }
.preisliste li{
  display:flex; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--haar-zart);
}
.preisliste li:last-child{ border-bottom:0; }
.preisliste span{ font-size:1.02rem; color:var(--tinte); }
.preisliste b{
  margin-left:auto; font-family:var(--serif); font-weight:600;
  font-size:1.32rem; color:var(--tinte); white-space:nowrap;
}
.preisliste-zwei{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:clamp(30px,4vw,54px); }
.preis-hinweis{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--haar-zart);
  font-size:.87rem; color:var(--rose-dunkel);
}
.preis-fuss{
  margin-top:clamp(34px,4vw,52px); padding-top:24px;
  border-top:1px solid var(--haar-zart);
  font-size:.87rem; color:var(--tinte-weich);
}

/* ---------- Über mich ---------- */
.ueber{ max-width:820px; }
.ueber-text p{ font-size:1.08rem; color:var(--tinte-weich); }
.ueber-text strong{ color:var(--tinte); font-weight:500; }
.haken{
  list-style:none; margin:2.6rem 0 0; padding:2.2rem 0 0;
  border-top:1px solid var(--haar);
  display:grid; grid-template-columns:1fr 1fr; gap:14px 34px;
}
.haken li{ position:relative; padding-left:30px; font-size:.95rem; color:var(--tinte-weich); }
.haken li::before{
  content:""; position:absolute; left:2px; top:.62em; width:12px; height:6px;
  border-left:1.5px solid var(--rose); border-bottom:1.5px solid var(--rose);
  transform:rotate(-45deg);
}

/* ---------- Termin ---------- */
.termin{
  padding:clamp(70px,9vw,126px) 0;
  background:linear-gradient(180deg,var(--blush) 0%,var(--creme-warm) 62%,var(--creme-warm) 100%);
  border-top:1px solid var(--haar-zart);
}
.termin-kacheln{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.kachel{
  background:var(--weiss); border:1px solid var(--haar-zart); border-radius:3px;
  padding:34px 30px; color:var(--tinte);
  display:flex; flex-direction:column; gap:5px;
  transition:transform .3s, box-shadow .3s;
}
.kachel:hover{ transform:translateY(-4px); color:var(--tinte);
  box-shadow:0 24px 48px -32px rgba(38,35,37,.45); }
.kachel svg{ width:25px; height:25px; fill:var(--rose); margin-bottom:14px; }
.kachel strong{ font-family:var(--serif); font-size:1.32rem; font-weight:500; }
.kachel span{ font-size:1.03rem; color:var(--tinte-weich); }
.kachel em{ font-style:normal; font-size:.79rem; color:var(--tinte-weich);
  opacity:.85; margin-top:11px; line-height:1.5; }
.kachel-wa{ background:var(--wa); border-color:var(--wa); color:#fff; }
.kachel-wa:hover{ background:var(--wa-dunkel); border-color:var(--wa-dunkel); color:#fff; }
.kachel-wa svg{ fill:#fff; }
.kachel-wa span,.kachel-wa em{ color:#fff; }
.kachel-wa em{ opacity:1; }

.oeffnung{
  margin-top:22px; background:var(--weiss); border:1px solid var(--haar-zart);
  border-radius:3px; padding:40px 44px;
}
.oeffnung h3{ margin-bottom:.45em; }
.oeffnung p{ color:var(--tinte-weich); max-width:52em; }
.oeffnung strong{ color:var(--tinte); font-weight:500; }
.oeffnung-cta{ margin-top:1.2em !important; }
.oeffnung-cta a{ display:inline-block; margin-left:.4em; color:var(--rose-dunkel);
  border-bottom:1px solid var(--blush); }
.oeffnung-cta a:hover{ border-color:var(--rose); }

/* ---------- Fuß ---------- */
.fuss{ background:var(--tief); color:rgba(255,255,255,.7); padding:68px 0 28px; }
.fuss a{ color:rgba(255,255,255,.7); }
.fuss a:hover{ color:#fff; }
.fuss-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:38px; padding-bottom:48px; }
.fuss h4{ color:#fff; font-family:var(--sans); font-size:.76rem; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:1.2em; }
.fuss p{ font-size:.95rem; line-height:2.2; margin-bottom:1em; }
.fuss p a{ display:inline-block; padding:6px 0; }
.fuss-logo{ width:42px; filter:brightness(0) invert(1); opacity:.8; }
.fuss-name{ font-family:var(--serif); font-size:1.5rem; color:#fff;
  letter-spacing:.12em; text-transform:uppercase; margin-top:16px !important; line-height:1.2; }
.fuss-name span{ display:block; font-family:var(--sans); font-size:.55rem;
  letter-spacing:.2em; color:var(--blush); margin-top:9px; text-transform:uppercase; }
.fuss-unten{ border-top:1px solid rgba(255,255,255,.12); padding-top:26px; }
.fuss-unten p{ font-size:.83rem; margin:0; opacity:.82; }
/* Fusszeile auf Impressum/Datenschutz – ohne Trennlinie darueber */
.fuss-unten-blank{ border-top:0; padding-top:0; }

/* ---------- Feste WhatsApp-Kugel rechts ---------- */
.wa-kugel{
  position:fixed; right:24px; bottom:24px; z-index:95;
  display:flex; align-items:center; gap:0;
  height:62px; width:62px; padding:0 19px;
  background:var(--wa); color:#fff; border-radius:999px;
  overflow:hidden; white-space:nowrap;
  box-shadow:0 14px 34px -10px rgba(20,95,54,.5), 0 2px 8px rgba(0,0,0,.12);
  transition:width .34s cubic-bezier(.22,1,.36,1), gap .34s, background .25s;
}
.wa-kugel svg{ width:24px; height:24px; fill:#fff; flex:none; }
.wa-kugel-text{
  font-size:.93rem; letter-spacing:.03em; color:#fff;
  opacity:0; transition:opacity .2s .08s;
}
.wa-kugel:hover,.wa-kugel:focus-visible{
  width:250px; gap:11px; background:var(--wa-dunkel); color:#fff;
}
.wa-kugel:hover .wa-kugel-text,.wa-kugel:focus-visible .wa-kugel-text{ opacity:1; }
/* sanftes Pulsieren, damit der Knopf auffaellt */
.wa-kugel::before{
  content:""; position:absolute; inset:0; border-radius:999px;
  box-shadow:0 0 0 0 rgba(28,132,73,.5);
  animation:puls 2.8s ease-out infinite;
}
@keyframes puls{
  0%{ box-shadow:0 0 0 0 rgba(28,132,73,.5); }
  70%{ box-shadow:0 0 0 18px rgba(28,132,73,0); }
  100%{ box-shadow:0 0 0 0 rgba(28,132,73,0); }
}
@media (prefers-reduced-motion: reduce){
  .wa-kugel::before{ animation:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- Rechtstexte ---------- */
.recht{ padding:clamp(48px,7vw,88px) 0 clamp(64px,9vw,110px); }
.recht .wrap{ max-width:760px; }
.recht h1{ font-size:clamp(2rem,4.5vw,3rem); margin-bottom:1.4rem; }
.recht h2{ font-size:1.45rem; margin-top:2.6rem; }
.recht h3{ font-size:1.1rem; margin-top:1.8rem; }
.recht p,.recht li{ color:var(--tinte-weich); font-size:.98rem; }
.recht ul{ padding-left:20px; }
.recht li{ margin-bottom:.5em; }
.recht .hinweis{
  background:var(--blush); border-left:3px solid var(--rose);
  padding:18px 22px; border-radius:2px; font-size:.9rem; color:var(--tinte);
}
.zurueck{ display:inline-block; margin-bottom:2rem; font-size:.86rem; letter-spacing:.04em; }

/* =========================================================
   Kleinere Bildschirme
   ========================================================= */
@media (max-width:1000px){
  .termin-kacheln{ grid-template-columns:1fr; }
  /* Drei Eintraege: drei schmalere Spalten sehen besser aus als ein
     zweispaltiges Raster, bei dem der dritte Eintrag allein unten steht. */
  .fakten-grid > div{ padding:26px 18px 26px 0; }
  .fakten-grid > div + div{ padding-left:20px; }
  .fuss-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .kopf-tel{ display:none; }
}

@media (max-width:860px){
  html{ scroll-padding-top:78px; }
  .nav{ display:none; }
  .burger{ display:block; }
  /* Impressum und Datenschutz haben kein Klappmenue – dort bleibt die
     kurze Navigation sichtbar und darf umbrechen. */
  .nav-recht{ display:flex; flex-wrap:wrap; gap:14px 20px; justify-content:flex-end; }
  .nav-recht a{ font-size:.86rem; padding:6px 0; }
  .kopf-inner{ min-height:68px; }

  .hero{ padding-top:36px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-bild{ order:-1; max-width:330px; margin-inline:auto; }
  .hero-bild img{ border-radius:190px 190px 8px 8px; aspect-ratio:9/13; }
  .hero-badge{ left:auto; right:-8px; bottom:18px; padding:12px 18px; }
  .hero-badge-zahl{ font-size:1.6rem; }
  .hero-text{ text-align:center; }
  .hero-text .lead{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .hero-cta .btn{ width:100%; }
  .kopfzeile{ text-align:center; margin-inline:auto; }

  .leistung{ gap:16px; padding:26px 0; }
  .leistung:hover{ padding-left:0; background:transparent; }
  .galerie{ grid-template-columns:repeat(2,1fr); gap:14px; }

  .preis-spalten{ grid-template-columns:1fr; }
  .preisliste-zwei{ grid-template-columns:1fr; }

  .haken{ grid-template-columns:1fr; }
  .ueber-text p{ font-size:1.03rem; }
}

@media (max-width:600px){
  body{ font-size:1.04rem; }
  .wrap{ padding-inline:22px; }
  .fakten-grid{ grid-template-columns:1fr; }
  .fakten-grid > div{ padding:22px 0 !important; border-left:0 !important; }
  .fakten-grid > div + div{ border-top:1px solid var(--haar-zart); }
  .preis-block h3{ font-size:1.2rem; }
  .oeffnung{ padding:30px 24px; }
  .fuss-grid{ grid-template-columns:1fr; gap:30px; }
  .wa-kugel{ right:16px; bottom:16px; height:58px; width:58px; padding:0 17px; }
  .wa-kugel:hover{ width:58px; gap:0; }
  .wa-kugel:hover .wa-kugel-text{ opacity:0; }
}

@media print{
  .kopf,.wa-kugel,.hero-cta,.aktion,.zitat,.hero-bild,.burger{ display:none; }
  body{ background:#fff; color:#000; font-size:11pt; }
  /* Fussbereich und Kontaktkacheln muessen lesbar bleiben - dort stehen
     Adresse und Telefonnummer. Hintergruende druckt kein Browser mit. */
  .fuss,.fuss a,.fuss p,.fuss h4,.fuss-name,.fuss-name span,.fuss-unten p{
    background:#fff !important; color:#000 !important; opacity:1 !important;
  }
  .fuss{ padding:16pt 0 0; border-top:1px solid #999; }
  .fuss-logo{ filter:none; opacity:1; }
  .kachel,.kachel-wa{ background:#fff !important; color:#000 !important;
    border:1px solid #999; transform:none !important; box-shadow:none !important; }
  .kachel svg{ fill:#000; }
  .kachel span,.kachel em{ color:#000 !important; opacity:1 !important; }
  a[href^="tel:"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
  .abschnitt,.termin{ padding:16pt 0; }
  .leistung:hover{ background:transparent; padding-left:4px; }
}