:root{--canvas:#fbf8f3;--surface:#fffdf9;--sand:#e8ddcf;--accent:#9b6d4d;--ink:#352d28;--muted:#6b5e55;--line:#ded3c7;--shadow:0 .75rem 2rem rgb(61 42 28 / 9%);--content-width:72.5rem}
*{box-sizing:border-box}html{background:var(--canvas);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}body{min-width:20rem;margin:0}a{color:inherit;text-underline-offset:.2em}a:focus-visible,button:focus-visible{outline:.2rem solid var(--accent);outline-offset:.2rem}.site-header{background:rgb(255 253 249 / 96%);border-bottom:1px solid var(--line)}.site-header__inner,.site-footer__inner{width:min(100% - 2.5rem,var(--content-width));margin:0 auto}.site-header__inner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem 2rem;min-height:5.5rem}.site-brand{font-size:1.15rem;font-weight:700;letter-spacing:.02em;text-decoration:none;white-space:nowrap}.site-nav{justify-self:end}.site-nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem;margin:0;padding:0;list-style:none}.site-nav a{display:block;padding:.45rem .7rem;border-radius:999px;color:var(--muted);font-size:.95rem;font-weight:600;text-decoration:none}.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--sand);color:var(--ink)}.site-header p{grid-column:1/-1;margin:-.25rem 0 1rem;color:var(--muted);font-size:.9rem}.nav-toggle{display:none;border:1px solid var(--line);border-radius:.45rem;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;padding:.45rem .7rem;cursor:pointer}
.site-main{width:min(100% - 2.5rem,var(--content-width));margin:0 auto;padding:clamp(2rem,5vw,4.5rem) 0}.site-main>h1,.site-main h1{margin:0 0 1.4rem;font-size:clamp(2rem,4vw,3.25rem);line-height:1.15;letter-spacing:-.035em}.site-main h2{margin:2rem 0 .5rem;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.25}.site-main h3{margin:1.5rem 0 .35rem;font-size:1.1rem}.site-main p,.site-main li,.site-main address{max-width:68ch}.site-main p{margin:0 0 1rem}.site-main ul{max-width:66ch;margin:0 0 1.25rem;padding-left:1.25rem}.site-main figure{margin:0}.site-main img{display:block;max-width:100%;height:auto}
.home-page{padding-top:clamp(1.5rem,3vw,2.5rem)}.home-banner{position:relative;overflow:hidden;border-radius:.9rem;box-shadow:var(--shadow)}.home-banner>img{width:100%}.home-banner__content{position:absolute;inset:0;display:grid;place-content:center;padding:1.5rem;text-align:center;color:#fff;text-shadow:0 .1rem .45rem rgb(0 0 0 / 70%)}.home-banner__content h1,.home-banner__content p{margin:0}.home-banner__content h1{font-size:clamp(1.75rem,4vw,3.35rem)}.home-banner__content p{font-size:clamp(1rem,2.2vw,1.35rem);font-weight:600}.home-page>p{margin:1.25rem 0 2rem;color:var(--accent);font-weight:700}.home-page>section:not(.home-banner){display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,23rem);gap:.5rem clamp(2rem,5vw,4.5rem);align-items:start}.home-page>section:not(.home-banner)>figure{grid-column:2;grid-row:1/span 7}.home-page>section:not(.home-banner)>figure img,.content-figure img,.appointment-figure img,.legal-figure img{width:100%;border-radius:.75rem;box-shadow:var(--shadow)}.home-page>section:not(.home-banner)>:not(figure){grid-column:1}
.services-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,24rem);gap:.25rem clamp(2rem,5vw,4.5rem);align-items:start}.services-page>h1{grid-column:1/-1}.services-page>p{grid-column:1}.services-page>.content-figure{grid-column:2;grid-row:2/span 5}.treatment-page>p{max-width:72ch}.treatment-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:46rem;gap:1rem;margin-top:2rem}.treatment-gallery img{width:100%;border-radius:.7rem;box-shadow:var(--shadow)}.appointment-page,.legal-page{display:grid;grid-template-columns:minmax(0,1fr) minmax(14rem,22rem);gap:.25rem clamp(2rem,5vw,4.5rem);align-items:start}.appointment-page>:not(.appointment-figure),.legal-page>:not(.legal-figure){grid-column:1}.appointment-figure,.legal-figure{grid-column:2;grid-row:1/span 12}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.gallery__button{display:block;width:100%;aspect-ratio:4/3;overflow:hidden;padding:0;border:0;border-radius:.7rem;background:var(--sand);box-shadow:0 .35rem 1rem rgb(61 42 28 / 8%);cursor:zoom-in}.gallery__button img{width:100%;height:100%;object-fit:cover;transition:transform 180ms ease}.gallery__button:hover img{transform:scale(1.04)}.lightbox{width:min(100vw,100%);height:100vh;height:100svh;max-width:none;max-height:none;margin:0;padding:1rem;border:0;background:transparent}.lightbox::backdrop{background:rgb(20 17 15 / 92%)}.lightbox__content{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;width:100%;height:100%;gap:.75rem}.lightbox__image{justify-self:center;max-width:min(100%,78rem);max-height:calc(100svh - 2rem);object-fit:contain}.lightbox button{z-index:1;display:grid;width:3rem;height:3rem;place-items:center;border:0;border-radius:50%;background:rgb(255 253 249 / 92%);color:var(--ink);font:inherit;font-size:2rem;line-height:1;cursor:pointer}.lightbox__close{position:absolute;top:0;right:0}.lightbox-open{overflow:hidden}
.site-footer{border-top:1px solid var(--line);background:#f1e8dd;color:var(--muted)}.site-footer__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding:1.35rem 0;font-size:.9rem}.site-footer p{margin:0}.site-footer p:last-child{margin-left:auto}
@media(max-width:62rem){.site-header__inner{gap:.5rem 1rem}.site-nav a{padding-inline:.55rem}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:48rem){.site-header__inner{grid-template-columns:1fr auto;min-height:4.75rem;padding:.65rem 0}.nav-toggle{display:block}.site-nav{display:none;grid-column:1/-1;justify-self:stretch;padding-top:.4rem}.site-nav.is-open{display:block}.site-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem}.site-nav a{padding:.6rem;border-radius:.45rem}.site-header p{margin:.25rem 0 .35rem}.home-page>section:not(.home-banner),.services-page,.appointment-page,.legal-page{display:block}.home-page>section:not(.home-banner)>figure,.services-page>.content-figure,.appointment-figure,.legal-figure{width:min(100%,26rem);margin:0 0 1.5rem}.treatment-gallery{max-width:none}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}}
@media(max-width:25rem){.site-header__inner,.site-footer__inner,.site-main{width:min(100% - 1.5rem,var(--content-width))}.gallery,.treatment-gallery{grid-template-columns:1fr}.lightbox{padding:.5rem}.lightbox__content{gap:.25rem}.lightbox button{width:2.5rem;height:2.5rem}}

/* Grundfarbkonzept der bestehenden Website */
.site-header {
  background: #383838;
  border-bottom-color: #4b4b4b;
}

.site-brand,
.site-nav a,
.site-header p {
  color: #f7f4ee;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: #505050;
  color: #fff;
}

.nav-toggle {
  border-color: #747474;
  background: #454545;
  color: #f7f4ee;
}

body:has(.home-page) {
  background: #383838;
}

body:has(.services-page),
body:has(.treatment-page),
body:has(.appointment-page),
body:has(.gallery-page),
body:has(.legal-page) {
  background: #f1e8dd;
}

.home-page {
  color: #f7f4ee;
}

.home-page > p {
  width: min(100%, 52rem);
  margin-right: auto;
  margin-left: auto;
  color: #f1dfcc;
}

.home-page > section:not(.home-banner) {
  width: min(100%, 52rem);
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 20.5rem);
  gap: 0.5rem 2rem;
  align-items: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-right: auto;
  margin-left: auto;
}

.home-page > section:not(.home-banner) > figure {
  align-self: center;
}

.home-page > section:not(.home-banner) h2 {
  font-size: clamp(1.85rem, 3vw, 2.35rem);
}

/* Ultraschall-Zahnreinigung */
.treatment-layout {
  display: grid;
  width: min(100%, 49.75rem);
  grid-template-columns: minmax(0, 32rem) minmax(11.25rem, 13.75rem);
  align-items: start;
  gap: 4rem;
  margin-right: auto;
  margin-left: auto;
}

.treatment-page > h1 {
  width: min(100%, 49.75rem);
  margin-right: auto;
  margin-left: auto;
}

.treatment-gallery {
  grid-template-columns: 1fr;
  width: min(100%, 12.5rem);
  max-width: 12.5rem;
  gap: 0.875rem;
  margin-top: 0;
}

.treatment-gallery img {
  height: auto;
}

.treatment-gallery__button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0.7rem;
  background: transparent;
  cursor: zoom-in;
}

.treatment-gallery__button img {
  width: 100%;
  height: auto;
  object-fit: initial;
  transition: filter 160ms ease, box-shadow 160ms ease;
}

.treatment-gallery__button:hover img {
  filter: brightness(1.04);
  box-shadow: 0 0.5rem 1.25rem rgb(61 42 28 / 16%);
}

.treatment-copy p {
  margin-bottom: 2.2em;
}

@media (max-width: 62rem) {
  .treatment-layout {
    grid-template-columns: 1fr;
  }

  .treatment-gallery {
    width: min(85%, 12.5rem);
    max-width: 12.5rem;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 25rem) {
  .treatment-gallery {
    grid-template-columns: 1fr;
  }
}

/* Gemeinsame Großansicht */
.lightbox__image {
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 90svh;
  border: 10px solid #fff;
  border-radius: 12px;
  object-fit: contain;
}

.lightbox--treatment .lightbox__image {
  width: min(24.5rem, 85vw);
}

.treatment-page {
  padding-bottom: 2.75rem;
}

/* Mobiles Hauptmenü */
@media (max-width: 48rem) {
  .site-nav {
    width: 100%;
    padding-top: 0.75rem;
    background: #383838;
  }

  .site-nav ul {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .site-nav li + li {
    border-top: 1px solid rgb(247 244 238 / 16%);
  }

  .site-nav a {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    padding: 0.75rem 0;
    border-radius: 0;
    color: #f7f4ee;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    background: transparent;
    color: #fff;
  }

  .site-nav a[aria-current="page"] {
    font-weight: 700;
  }

  .site-header p {
    display: none;
  }

  .site-nav.is-open + p {
    display: block;
    grid-column: 1 / -1;
    margin: 0;
    padding: 1rem 0 0.35rem;
    border-top: 1px solid rgb(247 244 238 / 16%);
    color: #f7f4ee;
    font-size: 0.85rem;
    text-align: left;
  }
}

@media (max-width: 48rem) {
  .home-page > section:not(.home-banner) {
    width: 100%;
  }
}

/* Typografie und Höhe des Startseiten-Banners */
.site-brand {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.015em;
  align-self: center;
  padding-bottom: 0;
  text-decoration-line: underline;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.05em;
}

.site-main {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
}

.site-main h1,
.site-main h2,
.site-main h3 {
  font-weight: 400;
}

.home-banner > img {
  display: block;
  height: clamp(20.625rem, 23vw, 23.75rem);
  object-fit: cover;
  object-position: center bottom;
}

@media (max-width: 48rem) {
  .home-banner > img {
    height: auto;
  }
}

/* Startseiten-Banner und Footer */
.home-page {
  padding-top: 0;
}

.home-banner {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
  box-shadow: none;
}

.site-footer__inner {
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
}

.site-footer p:first-child {
  max-width: 100%;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.45;
}

.site-footer a {
  color: var(--muted);
}

.site-footer p:last-child {
  margin-left: 0;
  font-size: 0.8rem;
}

/* Globaler Seitenkopf */
.site-header__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  min-height: 15rem;
  padding: 2rem 0 2.5rem;
}

.site-brand {
  font-size: clamp(2.1rem, 3vw, 2.25rem);
}

.site-nav {
  width: 100%;
}

.site-nav ul {
  justify-content: center;
}

.site-header p {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
  margin: 0;
}

.site-header__appointment-link {
  color: inherit;
  text-decoration: none;
}

.site-header__appointment-link:hover {
  text-decoration: underline;
}

@media (max-width: 48rem) {
  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: initial;
    gap: 0.5rem 1rem;
    min-height: 4.75rem;
    padding: 0.65rem 0;
  }

  .site-brand {
    font-size: 1.15rem;
  }

  .site-header p {
    position: static;
    grid-column: 1 / -1;
    margin: 0.25rem 0 0.35rem;
  }
}