/* SKINIC: ported from the old Tailwind app (tailwind.config.js, app/globals.css, CSS modules). */

/* Tailwind preflight, reproduced explicitly. */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p, blockquote, figure, dl, dd { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: inherit; }
body { -webkit-font-smoothing: antialiased; line-height: 1.5; }

/* Global rules from app/globals.css */
body { background: var(--color-dark); color: var(--color-light); }
h1, h2, h3, h4 {
  color: var(--color-gold);
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: uppercase;
  font-weight: 200;
  margin-bottom: 1.5rem;
}
h1 { font-size: 2.25rem; line-height: 2.5rem; }
h2 { margin-bottom: 2.5rem; }
h2:has(+ p) { margin-bottom: 1.5rem; }
p {
  font-size: 1rem;
  color: var(--color-light);
  font-weight: 300;
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
}
strong { font-weight: 700; }
a { cursor: pointer; font-weight: 500; }
a:hover { color: var(--color-gold); }
a[href^="tel:"] em { font-style: normal; display: inline-block; width: 1rem; }

/* Page width: Tailwind container (640 / 768 / 1024), px-5 below md. */
.site-header, .site-footer, .content {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 640px) { .site-header, .site-footer, .content { max-width: 640px; } }
@media (min-width: 768px) {
  .site-header, .site-footer, .content { max-width: 768px; padding-left: 0; padding-right: 0; }
}
@media (min-width: 1024px) { .site-header, .site-footer, .content { max-width: 1024px; } }
.content { padding-top: 0; padding-bottom: 0; }

/* Header */
.site-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  margin-bottom: 5rem;
  border-bottom: 2px solid var(--color-gold);
}
.c-logo { position: relative; z-index: 50; }
.c-logo img { height: 50px; width: auto; }
@media (min-width: 768px) { .c-logo img { height: 72px; } }
.c-nav { display: flex; flex-direction: row; align-items: center; position: relative; }
.c-nav-cta { display: none; }
@media (min-width: 768px) { .c-nav-cta { display: block; } }
.c-langswitch a { font-weight: 500; font-size: 0.875rem; color: var(--color-gold); padding: 0 2rem; }
.c-langswitch a:hover { text-decoration: underline; }
.c-langswitch a:not([href]), .c-langswitch[data-current="de"] a[data-lang="de"], .c-langswitch[data-current="en"] a[data-lang="en"] { display: none; }

/* Burger and full-screen menu (CSS only: checkbox toggle, details accordion) */
.c-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.c-burger { position: relative; z-index: 50; display: flex; flex-direction: column; justify-content: center; height: 30px; width: 44px; gap: 12px; cursor: pointer; transition: transform 0.3s ease-in-out; }
.c-burger span { display: block; height: 2px; width: 44px; background: var(--color-gold); transition: transform 0.3s ease-in-out; }
.c-burger span:first-child { width: 34px; transform: translateX(10px); }
.c-burger span:last-child { width: 34px; }
.c-nav-toggle:not(:checked) ~ .c-burger:hover span:first-child { transform: translateX(0); }
.c-nav-toggle:not(:checked) ~ .c-burger:hover span:last-child { transform: translateX(10px); }
.c-nav-toggle:checked ~ .c-burger span:nth-of-type(1) { width: 22px; transform-origin: center; transform: translate(19px, 6px) rotate(-45deg); }
.c-nav-toggle:checked ~ .c-burger span:nth-of-type(2) { transform-origin: center; transform: rotate(45deg); }
.c-nav-toggle:checked ~ .c-burger span:nth-of-type(3) { width: 22px; transform-origin: center; transform: translate(3px, -6px) rotate(-45deg); }
.c-nav-toggle:checked ~ .c-burger:hover { transform: rotate(90deg); }
.c-nav-toggle:focus-visible ~ .c-burger { outline: 2px solid var(--color-gold); outline-offset: 4px; }
body:has(.c-nav-toggle:checked) { overflow: hidden; }

.c-nav-overlay {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 30;
  width: 0;
  height: 100%;
  overflow-x: hidden;
  background: rgba(29, 29, 29, 0.9);
  transition: width 0.5s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.c-nav-toggle:checked ~ .c-nav-overlay { width: 100%; }
.c-nav-top { flex-shrink: 0; align-self: flex-end; height: 8rem; width: 40%; border-left: 2px solid var(--color-gold); border-bottom: 2px solid var(--color-gold); border-bottom-left-radius: 160px; }
.c-nav-bottom { flex-grow: 1; height: 4rem; width: 66.667%; align-self: flex-start; border-top: 2px solid var(--color-gold); border-right: 2px solid var(--color-gold); border-top-right-radius: 160px; }
@media (min-width: 768px) { .c-nav-bottom { height: 8rem; } }
.c-nav-list { width: 100%; max-width: 1024px; padding: 1rem 1.25rem; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; color: var(--color-gold); text-transform: uppercase; font-weight: 200; }
.c-nav-list::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .c-nav-list { padding: 1rem 0; } }
.c-nav-list > li { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 0.75rem; cursor: pointer; }
@media (min-width: 768px) { .c-nav-list > li { font-size: 1.5rem; line-height: 2rem; } }
.c-nav-list a { font-weight: 200; }
.c-nav-list li > a:not(.c-button):hover { padding-left: 0.25rem; }
.c-nav-list .c-button { font-weight: 500; }
.c-nav-list summary { list-style: none; cursor: pointer; }
.c-nav-list summary::-webkit-details-marker { display: none; }
.c-nav-list summary:hover { padding-left: 0.25rem; }
.c-nav-list details > ul { margin-top: 0.5rem; }
.c-nav-list details li { font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 0.5rem; padding-left: 1.25rem; }
@media (min-width: 768px) { .c-nav-list details li { font-size: 1.25rem; } }

/* Mobile call to action: two buttons on the right edge, rotated; hidden while scrolling down (nav.js) */
.c-cta { position: fixed; right: 0; top: 50%; margin: -150px 0.25rem 0 0; z-index: 20; display: flex; transform-origin: bottom right; transform: translateX(var(--cta-x, 0)) rotate(-90deg); transition: transform 0.15s; }
.c-cta-hide { --cta-x: 50px; }
@media (min-width: 768px) { .c-cta { display: none; } }
.c-cta a { font-size: 0.875rem; line-height: 1.25rem; text-transform: uppercase; font-weight: 500; padding: 0.375rem 0.625rem; border: 2px solid var(--color-gold); }
.c-cta-primary { background: var(--color-gold); color: #000; border-top-left-radius: 16px; }
.c-cta-primary:hover { background: #000; color: var(--color-gold); }
.c-cta-secondary { background: #000; color: var(--color-gold); border-bottom-right-radius: 16px; }
.c-cta-secondary:hover { background: var(--color-gold); color: #000; }

/* Button */
.c-button {
  display: inline-block;
  border: 2px solid var(--color-gold);
  border-radius: 16px 0 16px 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-gold);
  padding: 0.375rem 0.625rem;
}
.c-button:hover { background: var(--color-gold); color: #000; }

/* Hero */
.c-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.c-hero-image { border-radius: 0 0 80px 0; margin-bottom: 2.75rem; }
.c-hero-title { align-self: flex-start; }
.c-hero-title h1 { margin-bottom: 1rem; }
.c-hero-title h2 { margin-bottom: 1rem; font-size: 1.5rem; }
.c-hero-title a { position: relative; padding-left: 1.25rem; font-size: 1.125rem; line-height: 1.75rem; font-weight: 200; color: var(--color-gold); }
.c-hero-title a:hover { text-decoration: underline; }
.c-hero-title a::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 16px; height: 16px; background: url(/assets/icons/arrow-right.svg) no-repeat center / contain; transform: rotate(180deg); }
.c-hero-title table { width: 100%; color: var(--color-light); font-weight: 300; }
@media (min-width: 768px) {
  .c-hero { flex-direction: row; margin-bottom: 4rem; }
  .c-hero-image { border-radius: 0 120px 0 0; }
  .c-hero-title { padding-left: 4rem; align-self: auto; }
}

/* Detail = Facts + Text */
.c-detail { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.c-facts-side { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; margin-bottom: 4rem; }
.c-facts-side .c-button:not([data-cta]) { display: none; }
.c-facts { width: 100%; display: flex; flex-direction: column; border: 2px solid var(--color-gold); border-radius: 0 0 80px 0; color: var(--color-gold); font-weight: 200; padding: 1.25rem; margin-bottom: 1.5rem; }
.c-fact { display: flex; flex-direction: row; align-items: flex-start; }
.c-fact > div { width: 40%; margin-bottom: 0.5rem; }
.c-fact > div:last-child { width: 60%; }
.c-text { margin-top: -6px; margin-bottom: 4rem; }
.c-text ul { list-style: disc outside; padding-left: 0.75rem; color: var(--color-light); }
.c-text img { border-radius: 0 0 0 80px; }
@media (min-width: 768px) {
  .c-detail { flex-direction: row; }
  .c-facts-side { width: 33.333%; }
  .c-facts { width: 90%; }
  .c-text { width: 66.667%; }
  .c-text img { border-radius: 120px 0 0 0; }
}
/* A Text on its own (no Detail) uses the full width. */
.content > article > .c-text { width: 100%; }

/* Banner */
.c-banner { position: relative; height: 300px; margin: 0 0 -2.5rem -1.25rem; width: 100vw; }
.c-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(0.75); }
.c-banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; text-align: center; padding: 0 1.25rem; }
.c-banner-overlay p { line-height: 48px; }
@media (min-width: 640px) { .c-banner-overlay p { line-height: 1; } }
@media (min-width: 768px) { .c-banner { margin: 4rem 0 -2.5rem 0; width: 100%; } }

/* ImageText */
.c-imagetext { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 5rem; }
.c-imagetext-image img { margin: 0 auto 2.75rem; height: 300px; width: auto; object-fit: cover; border-radius: 0 0 80px 0; }
.c-imagetext[data-left="false"] .c-imagetext-image { order: -1; }
.c-imagetext[data-left="false"] .c-imagetext-image img { border-radius: 0 0 0 80px; }
.c-imagetext-content { align-self: flex-start; }
@media (min-width: 768px) {
  .c-imagetext { flex-direction: row; }
  .c-imagetext-image, .c-imagetext-content { flex-basis: 50%; }
  .c-imagetext-image img { height: 600px; border-radius: 120px 0 0 0; }
  .c-imagetext[data-left="true"] .c-imagetext-image { padding-right: 4rem; }
  .c-imagetext[data-left="true"] .c-imagetext-image img { border-radius: 0 120px 0 0; }
  .c-imagetext[data-left="true"] .c-imagetext-content { padding-left: 4rem; }
  .c-imagetext[data-left="false"] .c-imagetext-image { order: 2; padding-left: 4rem; }
  .c-imagetext[data-left="false"] .c-imagetext-image img { border-radius: 120px 0 0 0; }
  .c-imagetext[data-left="false"] .c-imagetext-content { padding-right: 4rem; }
}

/* Logos */
.c-logos { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 4rem; }
.c-logos-list p { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; }
.c-logos-list img { max-width: 150px; max-height: 50px; }
.c-logos-list a img { align-self: flex-start; max-width: 300px; max-height: 200px; }

/* Treatments */
.c-treatments { margin: 0 auto 4rem; text-align: center; }
.c-treatments-images { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.c-treatment { position: relative; display: block; transition: transform 0.15s; }
.c-treatment:hover { transform: scale(1.05); }
.c-treatment img { width: 100%; height: 200px; object-fit: cover; }
.c-treatment:first-child img { border-top-left-radius: 80px; }
.c-treatment:last-child img { border-bottom-right-radius: 80px; }
.c-treatment h3 { position: absolute; top: 1.25rem; right: 1.25rem; margin: 0; color: #000; }
.c-treatments-cta { margin-top: 1.25rem; }
@media (min-width: 768px) {
  .c-treatments { margin-top: 4rem; }
  .c-treatments-images { grid-template-columns: repeat(2, 1fr); }
}

/* Footer */
.c-footer { padding-top: 3rem; padding-bottom: 4rem; margin-top: 2.5rem; border-top: 2px solid var(--color-gold); font-size: 0.75rem; line-height: 16px; text-transform: uppercase; }
.c-footer h2 { margin-top: 3rem; margin-bottom: 1.5rem; }
.c-footer a { color: var(--color-light); font-size: 1rem; font-weight: 200; }
.c-footer a:hover { color: var(--color-gold); }
.c-footer a[href*="/booking"]::before { content: ""; width: 40px; height: 40px; display: block; margin-bottom: 10px; background: url(/assets/icons/calendar.svg) no-repeat center / contain; }
.c-footer a[href*="wa.me"]::before { content: ""; width: 40px; height: 40px; display: block; margin: 10px 0 5px; background: url(/assets/icons/whatsapp.svg) no-repeat center / contain; }
@media (min-width: 768px) { .c-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-top: 2.5rem; } }
.c-social { display: flex; flex-direction: row; gap: 1rem; padding-bottom: 0.75rem; }
.c-social img { width: 1.5rem; transition: transform 0.3s; }
.c-social img:hover { transform: scale(1.25); }

.waas-broken { display: none; }

/* Grid, halves, Profile */
.c-grid { display: flex; width: 100%; }
.c-grid[data-layout="row"] { flex-direction: row; gap: 1.25rem; }
.c-grid[data-layout="cols"] { flex-direction: column; gap: 1.25rem; }
.c-grid[data-layout="center"] { align-items: center; justify-content: center; }
.c-grid[data-layout="wrap"] { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2.5rem; margin: 0 4rem 4rem; width: auto; }
@media (min-width: 768px) { .c-grid[data-layout="cols"] { flex-direction: row; } }
.g-half { width: 50%; }
.g-half-md { width: 100%; }
@media (min-width: 768px) { .g-half-md { width: 50%; } }
.c-profile { width: 14rem; }
.c-profile-image { width: 14rem; height: 300px; object-fit: cover; border-radius: 0 0 80px 0; margin-bottom: 2.75rem; }
.c-profile h3 { font-size: 1.125rem; margin-bottom: 0; }
@media (min-width: 768px) { .c-profile-image { border-radius: 0 120px 0 0; } }

/* Prices */
.c-prices { width: 100%; }
@media (min-width: 768px) { .c-prices { width: 66.667%; margin-left: 30%; } }
.c-prices ul { color: var(--color-light); font-size: 1.125rem; line-height: 1.75rem; font-weight: 200; margin-bottom: 4rem; }
.c-prices li { display: flex; flex-direction: row; align-items: center; border-bottom: 2px solid var(--color-gold); padding: 1.25rem 0; }
.c-prices li:hover { color: var(--color-gold); }
.c-prices em { font-style: normal; margin-left: auto; min-width: 86px; text-align: right; }
.c-prices ul a[href*="book"], .c-prices ul a[href*="terminbuchung"] { margin-left: 0.625rem; font-size: 0; line-height: 0; }
.c-prices ul a[href*="book"]::before, .c-prices ul a[href*="terminbuchung"]::before { content: ""; width: 24px; height: 24px; display: block; background: url(/assets/icons/calendar.svg) no-repeat center / contain; }

/* Notice: scrolling banner at the top of the home page (old .marquee) */
.c-notice { width: 100%; overflow: hidden; margin-top: -4rem; margin-bottom: 2.5rem; }
.c-notice p { color: var(--color-gold); text-transform: uppercase; font-style: italic; white-space: nowrap; margin: 0; animation: c-marquee 15s linear infinite; }
.c-notice a { color: inherit; }
@keyframes c-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .c-notice p { animation: none; white-space: normal; } }

/* The image's base layer makes `.site-header nav ul` a flex row; the menu needs plain lists. */
.site-header nav.c-nav { gap: 0; }
.site-header nav .c-nav-list, .site-header nav .c-nav-list ul { display: block; gap: 0; margin: 0; }
.c-button.c-nav-cta { display: none; }
@media (min-width: 768px) { .c-button.c-nav-cta { display: block; } }
.site-header nav .c-nav-list { padding: 1rem 1.25rem; }
.site-header nav .c-nav-list ul { padding: 0; }
@media (min-width: 768px) { .site-header nav .c-nav-list { padding: 1rem 0; } }

/* Footer: Tailwind's text-base sets a 24px line height on p and a; the footer's own 16px only applies to the rest. */
.c-footer p, .c-footer a, .c-footer em { line-height: 1.5rem; }