@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&family=Space+Mono:wght@400&display=swap');

:root {
  --bg-base: #ffffff;
  --bg-card: #f1f0ea;
  --bg-highlight: #ffffff;
  --text-primary: #6e5b4b;
  --text-secondary: #a29386;
  --accent-brown: #6e5b4b;
  --accent-ochre: #d6a24a;
  --accent-sage: #6e5b4b;
  --nav-active: #f5dde1;
  --line-dotted: #cabca9;
  --radius-outer: 32px;
  --radius-inner: 20px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #f4efe4;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.site-shell {
  --text-primary: #111111;
  --text-secondary: #2f2f2f;
}

.site-shell.font-white {
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
}

h1,
h2,
h3,
.serif {
  font-family: 'Cormorant Garamond', serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 24px 56px;
}

.dotted-divider {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 2rem 0;
  color: var(--text-secondary);
}

.dotted-divider-text {
  padding-right: 1.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.8rem;
}

.dotted-divider-line {
  flex-grow: 1;
  border-bottom: 1px dotted var(--line-dotted);
  opacity: 0.6;
}

.glass-card {
  background: var(--bg-card);
  border-radius: var(--radius-outer);
  box-shadow: 0 4px 20px -5px rgb(74 59 42 / 0.08);
}

.img-soft {
  border-radius: var(--radius-inner);
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: sepia(0.1) brightness(1.05);
}

.hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slider-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}

.hero-slider-image.is-active {
  opacity: 1;
}

.hero-stack {
  position: relative;
}

.editorial-blob {
  position: absolute;
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.blob-ochre {
  background: rgb(214 162 74 / 34%);
}

.about-overlap {
  position: relative;
}

.about-overlap-card {
  position: relative;
  z-index: 2;
}

.about-overlap-blob {
  width: 58%;
  height: 58%;
  left: -18%;
  bottom: -16%;
}

.cta-blob-wrap {
  position: relative;
}

.cta-blob {
  width: 82px;
  height: 82px;
  right: -14px;
  bottom: -18px;
  z-index: 0;
}

.cta-blob-wrap .button {
  position: relative;
  z-index: 1;
}

.contact-intro-shell {
  position: relative;
  min-height: 100%;
  padding: 10px 8px 16px;
}

.contact-intro-content {
  position: relative;
  z-index: 10;
}


.floating-nav {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--accent-brown);
  color: var(--bg-highlight);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px -5px rgb(74 59 42 / 0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  animation: nav-pulse 3.6s ease-in-out infinite;
}

@keyframes nav-pulse {
  0%   { box-shadow: 0 10px 30px -5px rgb(74 59 42 / 0.18); }
  50%  { box-shadow: 0 12px 36px -4px rgb(74 59 42 / 0.30), 0 0 0 4px rgb(110 91 75 / 0.07); }
  100% { box-shadow: 0 10px 30px -5px rgb(74 59 42 / 0.18); }
}

.floating-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  width: 40px;
  height: 40px;
  font-size: 12px;
  border: 0;
  background: transparent;
  color: var(--bg-highlight);
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.floating-nav a:hover {
  background: rgb(255 255 255 / 0.16);
  transform: scale(1.18);
}

.floating-nav a.is-active,
.floating-nav a.cta.is-active {
  background: var(--bg-base);
  color: var(--accent-brown);
  box-shadow: inset 0 0 0 1px rgb(110 91 75 / 0.10);
}

.floating-nav .cta {
  background: #e5d5ae;
  color: var(--accent-brown);
}

.floating-nav .nav-leistungen {
  position: static;
  display: inline-flex;
}

.floating-nav summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--bg-highlight);
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.floating-nav summary::-webkit-details-marker {
  display: none;
}

.floating-nav summary:hover {
  background: rgb(255 255 255 / 0.16);
  transform: scale(1.18);
}

.floating-nav .nav-leistungen[open] summary {
  background: var(--bg-base);
  color: var(--accent-brown);
}

.floating-nav .nav-leistungen.is-active summary {
  background: var(--bg-base);
  color: var(--accent-brown);
  box-shadow: inset 0 0 0 1px rgb(110 91 75 / 0.10);
}

.floating-nav .nav-leistungen-menu {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: 0 10px 30px -5px rgb(74 59 42 / 0.2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}

.floating-nav .nav-leistungen-menu a {
  width: auto;
  height: auto;
  justify-content: flex-start;
  padding: 11px 14px;
  border-radius: 12px;
  white-space: nowrap;
  color: var(--text-primary);
}

.floating-nav .nav-leistungen-menu a:hover {
  background: var(--bg-base);
  transform: none;
}

.landing-related-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.landing-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.landing-related-price {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.92);
  color: var(--accent-brown);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.paket-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.paket-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -12px rgb(74 59 42 / 0.28);
}

.paket-card:hover .paket-card-media img {
  transform: scale(1.04);
}

.input,
.textarea {
  width: 100%;
  border: none;
  border-radius: 16px;
  background: #fdfcf8;
  color: var(--text-primary);
  padding: 14px;
  font: inherit;
}

.button {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 14px;
  background: var(--accent-brown);
  color: var(--bg-highlight);
  cursor: pointer;
}

.button:hover,
.admin-btn-primary:hover,
.floating-nav .cta:hover {
  filter: brightness(0.96);
}

.google-reviews-button {
  background: transparent;
  color: var(--accent-brown);
  border: 1px solid rgb(110 91 75 / 0.3);
  box-shadow: none;
  padding: 10px 22px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  transition: background-color 240ms ease;
}

.google-reviews-button:hover {
  filter: none;
  background: rgb(110 91 75 / 0.06);
}

.captcha-shell {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top left, rgb(214 162 74 / 0.12), transparent 42%),
    linear-gradient(180deg, rgb(255 253 248 / 0.92), rgb(245 241 230 / 0.96));
  border: 1px solid rgb(202 188 169 / 0.72);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
}

.captcha-row {
  display: grid;
  gap: 8px;
}

.captcha-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.captcha-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  background: rgb(110 91 75 / 0.08);
  color: var(--accent-brown);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.captcha-question {
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
}

.captcha-refresh {
  border: 1px solid rgb(110 91 75 / 0.18);
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  background: rgb(255 255 255 / 0.65);
  color: var(--accent-brown);
  font-family: "Space Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.captcha-refresh:hover {
  background: rgb(255 255 255 / 0.92);
  border-color: rgb(110 91 75 / 0.3);
}

.captcha-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mono-label {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  opacity: 0.86;
  font-weight: 300;
}

.page p,
.page li,
.page small {
  font-weight: 300;
}

.soft-copy {
  color: var(--text-secondary);
  opacity: 0.82;
  font-weight: 300;
}

.soft-copy p,
.soft-copy li {
  color: inherit;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 20px 80px;
  font-family: 'Space Mono', monospace;
}

.admin-wrap h1,
.admin-wrap h2,
.admin-wrap h3 {
  font-family: 'DM Sans', sans-serif;
}

.admin-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e6e2da;
  padding: 18px;
  box-shadow: 0 8px 26px -18px rgb(74 59 42 / 0.3);
  scroll-margin-top: 168px;
}

.admin-card h2 {
  margin: 0 0 10px;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
  position: sticky;
  top: 10px;
  z-index: 60;
  background: rgb(243 237 226 / 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid #e6dfd2;
  border-radius: 14px;
  padding: 12px;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-floating-actions {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid #dfd7cb;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 24px -18px rgb(74 59 42 / 0.5);
  backdrop-filter: blur(6px);
}

.admin-status {
  font-size: 12px;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  border: 1px solid #d9d3ca;
  background: #f8f5ef;
}

.admin-status-saving {
  background: #efe7db;
}

.admin-status-saved {
  background: #dce9d7;
}

.admin-status-error {
  background: #f2d7d7;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.admin-module-nav {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  position: sticky;
  top: 84px;
  z-index: 59;
  background: rgb(255 255 255 / 0.97);
  border: 1px solid #d9d1c3;
  border-radius: 16px;
  padding: 10px;
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px -20px rgb(74 59 42 / 0.65);
}

.admin-module-nav-title {
  font-family: "Space Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6e5b4b;
  opacity: 0.92;
  padding-inline: 4px;
}

.admin-module-nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.admin-module-nav a,
.admin-module-nav button {
  border: 1px solid #cec5b7;
  border-radius: var(--radius-pill);
  padding: 8px 15px;
  font-size: 13px;
  background: #f8f5ef;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: all 140ms ease;
  font-family: inherit;
  color: inherit;
}

.admin-module-nav a:hover,
.admin-module-nav button:hover {
  background: #efe8dc;
  border-color: #b7aa98;
}

.admin-module-nav a.active,
.admin-module-nav button.active {
  background: var(--accent-brown);
  color: var(--bg-highlight);
  border-color: #5f4d3e;
}

/* "Erweitert" (selten genutzt) optisch abgesetzt und nach rechts geschoben */
.admin-module-nav button.admin-module-nav-advanced {
  margin-left: auto;
  background: transparent;
  border-style: dashed;
  color: #6e5b4b;
}
.admin-module-nav button.admin-module-nav-advanced.active {
  background: var(--accent-brown);
  color: var(--bg-highlight);
  border-style: solid;
}

.admin-card--full {
  grid-column: 1 / -1;
}

.admin-field-label {
  display: block;
  margin: 10px 0 6px;
}

.admin-upload-note {
  display: block;
  margin-top: 6px;
  min-height: 16px;
}

.admin-field-help {
  display: block;
  margin: 4px 0 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #8a7a6b;
}

.admin-advanced-summary {
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
}

.admin-btn {
  border: 1px solid #d4cec4;
  border-radius: 12px;
  padding: 10px 14px;
  background: #fff;
  cursor: pointer;
  color: #4a3b2a;
  font-family: inherit;
}

.admin-btn-primary {
  background: var(--accent-brown);
  color: var(--bg-highlight);
  border-color: #5f4d3e;
}

.admin-offer-list {
  display: grid;
  gap: 12px;
}

.admin-offer-card {
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.admin-offer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 10px;
}

.admin-mini-btn {
  border: 1px solid #d3d3d3;
  border-radius: 10px;
  padding: 6px 10px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}

.admin-mini-btn-danger {
  border-color: #d7baba;
  color: #8f3c3c;
}

.editor {
  border: 1px solid #ddd;
  border-radius: 10px;
  min-height: 120px;
  padding: 12px;
  background: #fff;
}

.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.toolbar button {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
}

.booking-grid-7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.calendar-day {
  aspect-ratio: 1.5;
  border-radius: 12px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-size: 1rem;
}

.calendar-day:hover:not(.empty):not(.muted) {
  background: #ebe5d5;
}

.calendar-day.selected {
  background: var(--text-primary);
  color: #ebe5d5;
}

.calendar-day.muted {
  color: #bcaaa4;
  cursor: not-allowed;
}

.calendar-day.empty {
  pointer-events: none;
}

.calendar-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid #d6ccba;
  background: #fffdf8;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
}

.booking-packages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.package-select {
  text-align: left;
  border: 1px solid transparent;
  background: #ebe5d5;
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.package-select.active {
  background: #fffdf8;
  border-color: var(--text-primary);
}

.booking-summary-card {
  background: #fffdf8;
  border: 1px solid rgb(188 170 164 / 0.3);
  border-radius: 16px;
  padding: 18px;
}

/* "Deine Auswahl": Info-Zeile + zwei Paketkarten + Gesamt-Zeile */
.booking-choice-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pk-line, #e4dccf);
}

.booking-choice-value {
  font-style: italic;
  font-size: 26px;
  line-height: 1.15;
}

.paket-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.paket-card {
  position: relative;
  display: block;
  background: #fffdf8;
  border: 1px solid var(--pk-line, #e4dccf);
  border-radius: 14px;
  padding: 16px 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.paket-card:hover {
  border-color: #7d8f7a;
}

.paket-card.active {
  border-color: #7d8f7a;
  box-shadow: 0 0 0 1px #7d8f7a inset;
}

.paket-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #7d8f7a;
  color: #fffdf8;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.paket-card-price {
  display: block;
  font-size: 30px;
  line-height: 1.1;
  margin: 6px 0 2px;
}

.paket-card-desc {
  font-size: 12px;
  margin: 0;
}

.booking-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pk-line, #e4dccf);
}

.booking-total-price {
  font-size: 32px;
  line-height: 1;
}

@media (max-width: 640px) {
  .paket-card-grid {
    grid-template-columns: 1fr;
  }
}

.about-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-slider-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation-name: about-slider-fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes about-slider-fade {
  0% {
    opacity: 0;
    transform: translateX(14px) scale(1.02);
  }

  8% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  28% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  36% {
    opacity: 0;
    transform: translateX(-14px) scale(1.02);
  }

  100% {
    opacity: 0;
    transform: translateX(-14px) scale(1.02);
  }
}

/* ── Header nav responsive ── */
.header-nav-desktop {
  display: flex;
}

.header-nav-mobile-toggle {
  display: none !important;
}

@media (max-width: 680px) {
  .header-nav-desktop {
    display: none !important;
  }

  .header-nav-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .faq-hide-mobile {
    display: none;
  }

  .floating-nav .title {
    display: none;
  }

  .about-overlap {
    order: 2;
    margin-top: 8px;
  }

  .contact-intro-shell {
    min-height: auto;
    padding-bottom: 0;
  }

  .about-overlap-blob {
    width: 42%;
    height: 42%;
    left: -14%;
    bottom: -12%;
  }


  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-header {
    flex-direction: column;
    top: 6px;
    padding: 10px;
  }

  .admin-module-nav {
    top: 116px;
  }

  .admin-floating-actions {
    left: 12px;
    right: 12px;
    bottom: 12px;
    justify-content: space-between;
  }

  .booking-packages {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-animate {
    animation: none;
  }

  .about-slider-image {
    animation: none;
    opacity: 0;
  }

.about-slider-image:first-child {
    opacity: 1;
  }
}

.portfolio-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.portfolio-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chip {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--text-secondary);
  padding: 8px 14px;
  font-family: "Space Mono", monospace;
  font-size: 12px;
  cursor: pointer;
}

.filter-chip.active {
  background: var(--text-primary);
  color: var(--bg-base);
}

.portfolio-masonry {
  column-count: 3;
  column-gap: 20px;
  margin-bottom: 90px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: var(--radius-inner);
  overflow: hidden;
  position: relative;
  background: var(--bg-card);
  cursor: zoom-in;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
  filter: sepia(0.05) brightness(1.02);
}

.masonry-item:hover img {
  transform: scale(1.03);
}

.masonry-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: linear-gradient(to top, rgb(74 59 42 / 0.28), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.masonry-item:hover .masonry-overlay {
  opacity: 1;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(235 229 213 / 0.96);
  backdrop-filter: blur(8px);
  padding: 24px;
}

.lightbox-image {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: var(--radius-inner);
  box-shadow: 0 20px 50px rgb(74 59 42 / 0.14);
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  border: 0;
  border-radius: var(--radius-pill);
  width: 38px;
  height: 38px;
  background: rgb(255 255 255 / 0.8);
  color: var(--text-primary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.testimonials-carousel {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.testimonials-track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 12px;
  transition: all 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.testimonials-track-swap {
  animation: testimonials-swap-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes testimonials-swap-in {
  0% {
    opacity: 0.28;
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.testimonials-slide {
  flex: 1 1 0;
  min-width: 0;
  padding: 26px;
  height: 268px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #f5f1e6;
  border: 1px solid rgb(188 170 164 / 0.26);
  box-shadow: 0 10px 24px -18px rgb(74 59 42 / 0.3);
  overflow: hidden;
  transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 420ms ease, background-color 420ms ease;
}

.testimonials-slide.is-featured {
  background: #fffdf8;
}

.testimonials-quote {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 14px;
}

.testimonials-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.testimonial-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 3px solid #ebe5d5;
  flex-shrink: 0;
  box-shadow: 0 8px 16px -12px rgb(74 59 42 / 0.4);
}

.testimonial-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.testimonial-stars {
  font-size: 18px;
  letter-spacing: 0.08em;
  color: #fbbc05;
}

.testimonials-author {
  font-size: 12px;
  letter-spacing: 0.06em;
}

.carousel-arrow {
  border: 1px solid #d4cec4;
  border-radius: var(--radius-pill);
  width: 46px;
  height: 46px;
  background: #fff;
  color: var(--text-primary);
  cursor: pointer;
  align-self: center;
  font-size: 28px;
  line-height: 1;
}

.carousel-arrow:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.portfolio-home-tile {
  min-height: 220px;
}

@media (max-width: 1280px) {
  .portfolio-masonry {
    column-count: 2;
  }
}

@media (max-width: 700px) {
  .portfolio-masonry {
    column-count: 3;
    column-gap: 8px;
  }

  .masonry-item {
    margin-bottom: 8px;
  }

  .testimonials-carousel {
    gap: 6px;
  }

  .testimonials-track {
    gap: 6px;
  }

  .testimonials-slide {
    flex: 1 1 100%;
    max-width: 100%;
    height: 250px;
    padding: 18px 16px;
  }

  .google-reviews {
    gap: 8px;
    margin-bottom: 26px;
  }

  .google-reviews-stars {
    font-size: 16px !important;
    letter-spacing: 2px !important;
  }

  .google-reviews-label {
    gap: 6px !important;
  }

  .google-reviews-label svg {
    width: 15px;
    height: 15px;
  }

  .google-reviews-text {
    font-size: 16px !important;
  }

  .google-reviews-button {
    background: transparent;
    color: var(--accent-brown);
    border: 1px solid rgb(110 91 75 / 0.35);
    height: auto;
    padding: 8px 18px !important;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    box-shadow: none;
  }

  .testimonials-track .testimonials-slide:nth-child(n + 2) {
    display: none;
  }

  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .testimonials-quote {
    font-size: 1.15rem;
  }

  .testimonial-avatar-wrap {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 900px) {
  .portfolio-home-tile {
    min-height: 140px;
  }
}

/* ============================================================
   CLEAN-THEME — warm-minimalistisches Redesign ("Bilder als Held")
   Aktivieren: URL ?theme=clean  ·  Zurück: ?theme=default
   (Inline-Skript in app/layout.tsx setzt data-theme am <html>.)
   REIN ADDITIVE Überschreibungs-Ebene: ändert nur die Optik über
   bestehende Klassen – KEIN JSX, keine Struktur, keine Links werden
   angefasst. Der Default (ohne data-theme) bleibt unverändert.
   /admin ist ausgenommen (dort wird kein data-theme gesetzt).
   ============================================================ */
:root[data-theme="clean"] {
  /* Helle, ruhige Basis – die Wärme kommt aus den Fotos, nicht aus Beige */
  --bg-base: #ffffff;
  --bg-card: #f6f2ec;
  --bg-highlight: #ffffff;

  /* Dunkle, warme, kontrastreiche Schrift (AAA auf hellem Grund) */
  --text-primary: #2b2320;
  --text-secondary: #5a4e45;

  /* Akzente stark zurückgenommen – ruhiges, editoriales Bild */
  --accent-brown: #6e5b4b;
  --accent-ochre: #6e5b4b;
  --accent-sage: #8a7361;
  --line-dotted: #d8cdbf;
  --nav-active: #efe8dd;

  /* Klare, eckige Kanten */
  --radius-outer: 0px;
  --radius-inner: 0px;
  --radius-pill: 0px;
}

/* Ruhiger, heller Seitenhintergrund statt des kräftigen Beige */
:root[data-theme="clean"] body { background: #faf8f4; }

/* .site-shell Dunkeltöne warm halten (statt #111/#2f2f2f) */
:root[data-theme="clean"] .site-shell { --text-primary: #2b2320; --text-secondary: #5a4e45; }
:root[data-theme="clean"] .site-shell.font-white { --text-primary: #ffffff; --text-secondary: #ffffff; }

/* Eckige Kanten überall erzwingen – deckt auch inline-/px-Radien ab */
:root[data-theme="clean"] *,
:root[data-theme="clean"] *::before,
:root[data-theme="clean"] *::after { border-radius: 0 !important; }

/* 1) Dekorative Ochre-„Blobs" entfernen – Fotos & Weißraum führen */
:root[data-theme="clean"] .editorial-blob { display: none !important; }

/* 2) Karten flach: keine Beige-Box, kein Schatten – nur feine Linie.
      Neutralisiert auch inline border-left:3px (Seitenstreifen). */
:root[data-theme="clean"] .glass-card {
  background: transparent !important;
  box-shadow: none !important;
  border: 1px solid rgb(110 91 75 / 0.14) !important;
}

/* 3) Fotos natürlich zeigen (Sepia/Aufhellung entfernen) */
:root[data-theme="clean"] .img-soft,
:root[data-theme="clean"] .masonry-item img { filter: none !important; }

/* 4) Kicker & Divider zeitgemäß: feine Linie statt gepunktet, mehr Ruhe */
:root[data-theme="clean"] .dotted-divider-line { border-bottom: 1px solid var(--line-dotted); opacity: 1; }
:root[data-theme="clean"] .dotted-divider-text { color: var(--text-secondary); opacity: 0.9; letter-spacing: 0.24em; }
:root[data-theme="clean"] .mono-label { opacity: 1; letter-spacing: 0.14em; }
:root[data-theme="clean"] .soft-copy { opacity: 1; }

/* 5) Buttons ruhig & editorial */
:root[data-theme="clean"] .button {
  background: var(--text-primary);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 400;
  padding: 15px 22px;
}
:root[data-theme="clean"] .button:hover { filter: none; background: #40352f; }
:root[data-theme="clean"] .google-reviews-button {
  background: transparent; color: var(--text-primary);
  border: 1px solid rgb(110 91 75 / 0.3);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem;
}
:root[data-theme="clean"] .google-reviews-button:hover { background: rgb(110 91 75 / 0.06); }

/* 6) Floating-Nav: ruhige, klare Leiste (kein Pulsieren) */
:root[data-theme="clean"] .floating-nav {
  animation: none !important;
  background: var(--text-primary);
  box-shadow: 0 8px 24px -10px rgb(43 35 32 / 0.35);
}
:root[data-theme="clean"] .floating-nav .cta { background: #e7ddca; color: var(--text-primary); }
:root[data-theme="clean"] .floating-nav a.is-active,
:root[data-theme="clean"] .floating-nav a.cta.is-active,
:root[data-theme="clean"] .floating-nav .nav-leistungen[open] summary,
:root[data-theme="clean"] .floating-nav .nav-leistungen.is-active summary {
  background: var(--nav-active); color: var(--text-primary);
}
:root[data-theme="clean"] .floating-nav .nav-leistungen-menu { background: #ffffff; border: 1px solid rgb(110 91 75 / 0.14); }

/* 7) Erfahrungen/Testimonials flacher & heller */
:root[data-theme="clean"] .testimonials-slide { background: #f6f2ec; border: 1px solid rgb(110 91 75 / 0.12); box-shadow: none; }
:root[data-theme="clean"] .testimonials-slide.is-featured { background: #ffffff; }
:root[data-theme="clean"] .carousel-arrow { background: #ffffff; border: 1px solid rgb(110 91 75 / 0.2); }

/* 8) Portfolio-Filter ruhig */
:root[data-theme="clean"] .filter-chip { background: transparent; border: 1px solid rgb(110 91 75 / 0.2); color: var(--text-secondary); letter-spacing: 0.1em; }
:root[data-theme="clean"] .filter-chip.active { background: var(--text-primary); color: #ffffff; }
:root[data-theme="clean"] .filter-chip:hover { border-color: var(--text-primary); color: var(--text-primary); }

/* 9) Formularfelder klar umrandet */
:root[data-theme="clean"] .input,
:root[data-theme="clean"] .textarea { background: #ffffff; border: 1px solid rgb(110 91 75 / 0.18); }

/* 10) Lightbox heller */
:root[data-theme="clean"] .lightbox { background: rgb(250 248 244 / 0.97); }

/* Feinschliff */
:root[data-theme="clean"] h1,
:root[data-theme="clean"] h2,
:root[data-theme="clean"] h3 { letter-spacing: -0.01em; }
:root[data-theme="clean"] .page a:not(.button):not(.filter-chip):hover,
:root[data-theme="clean"] .soft-copy a:hover { color: var(--accent-sage); }
:root[data-theme="clean"] .page li::marker { color: var(--accent-sage); }

/* ============================================================
   EDITORIAL REDESIGN ("Bilder als Held")  ·  pk-* Klassen
   Nur auf Site-Seiten aktiv (data-theme="clean" = Default,
   /admin ausgenommen). Neue Markup-Klassen, keine Admin-Styles.
   ============================================================ */
:root[data-theme="clean"] {
  --pk-serif: 'Cormorant Garamond', Georgia, serif;
  --pk-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pk-ink: #2b2320;
  --pk-soft: #5a4e45;
  --pk-muted: #8a7c70;
  --pk-line: #e4dccf;
  --pk-clay: #7a5c46;
  --pk-bg: #faf8f4;
  --pk-ease: cubic-bezier(0.16,1,0.3,1);
}
:root[data-theme="clean"] body{ background: var(--pk-bg); color: var(--pk-ink); font-family: var(--pk-sans); font-weight:300; }
/* Nur 2 Schriften auf der Seite: verbliebene Space-Mono-Labels → Jost */
:root[data-theme="clean"] .mono-label,
:root[data-theme="clean"] .dotted-divider-text{ font-family: var(--pk-sans); letter-spacing:.16em; }

/* Import Jost alongside existing fonts */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

/* Wrappers */
.pk-wrap{ width:min(1180px,92vw); margin-inline:auto; }
.pk-narrow{ width:min(760px,90vw); margin-inline:auto; }
.pk-kicker{ font-family:var(--pk-sans); font-weight:400; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--pk-clay); }
/* Kompakter Seitenrhythmus: Sektionen rücken näher zusammen. */
.pk-section{ padding-block: clamp(40px,6vh,76px); }

/* ---- Top navigation (replaces floating pill) ---- */
.pk-nav{ position:fixed; inset:0 0 auto 0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(16px,4vw,40px); color:#fff;
  transition:background .5s var(--pk-ease), padding .5s var(--pk-ease), box-shadow .5s var(--pk-ease), transform .45s var(--pk-ease); }
/* Weiß, leicht transparent – auf allen Seiten, auch über dem Hero. */
.pk-nav.pk-solid{ background:rgb(255 255 255 / .82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--pk-ink); box-shadow:0 1px 0 var(--pk-line); padding-top:14px; padding-bottom:14px; }
/* Beim Runterscrollen ausblenden, beim Hochscrollen wieder einblenden. */
.pk-nav.pk-hidden{ transform:translateY(-100%); box-shadow:none; }
.pk-brand{ font-family:var(--pk-serif); font-size:1.4rem; font-weight:500; letter-spacing:.02em; line-height:1; }
.pk-brand small{ display:block; font-family:var(--pk-sans); font-weight:300; font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; opacity:.82; margin-top:3px; }
.pk-navlinks{ display:flex; align-items:center; gap:30px; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400; }
.pk-navlinks a{ position:relative; padding-bottom:3px; white-space:nowrap; }
.pk-navlinks a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor; transition:width .4s var(--pk-ease); }
.pk-navlinks a:hover::after{ width:100%; }
.pk-navcta{ border:1px solid currentColor; padding:9px 18px; letter-spacing:.16em; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.pk-navcta:hover{ background:var(--pk-ink); border-color:var(--pk-ink); }
.pk-navcta:hover span{ color:#fff; }
.pk-nav-drop{ position:relative; }
.pk-nav-drop > summary{ list-style:none; cursor:pointer; }
.pk-nav-drop > summary::-webkit-details-marker{ display:none; }
.pk-nav-menu{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%); background:var(--pk-bg); color:var(--pk-ink);
  border:1px solid var(--pk-line); padding:8px; min-width:230px; display:flex; flex-direction:column; box-shadow:0 14px 34px -18px rgb(43 35 32/.4); }
.pk-nav-menu a{ padding:10px 12px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pk-soft); }
.pk-nav-menu a:hover{ background:#fff; color:var(--pk-ink); }
/* Hamburger (3 Striche → X) */
.pk-burger{ display:none; position:relative; width:34px; height:34px; background:none; border:0; color:currentColor; cursor:pointer; padding:0; }
.pk-burger span{ position:absolute; left:6px; right:6px; height:1.6px; background:currentColor; transition:transform .35s var(--pk-ease), opacity .2s ease; }
.pk-burger span:nth-child(1){ top:11px; }
.pk-burger span:nth-child(2){ top:16px; }
.pk-burger span:nth-child(3){ top:21px; }
.pk-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.pk-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.pk-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Mobile-Menü (klappt von oben herein) */
.pk-mobilemenu{ display:none; }
.pk-mobilemenu-label{ font-family:var(--pk-sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--pk-muted); margin-top:14px; }

/* ---- Full-bleed hero ---- */
.pk-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.pk-hero-media{ position:absolute; inset:0; z-index:0; background:linear-gradient(155deg,#c9b19f,#6c5949); }
.pk-hero-media img{ width:100%; height:100%; object-fit:cover; }
.pk-hero-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgb(30 24 20/.28) 0%, transparent 30%, transparent 50%, rgb(24 19 16/.62) 100%); }
.pk-hero-inner{ position:relative; z-index:2; color:#fff; padding-bottom:clamp(48px,9vh,120px); width:min(1180px,92vw); margin-inline:auto; }
.pk-hero h1{ font-family:var(--pk-serif); font-weight:400; line-height:1.04; letter-spacing:-0.02em; margin:14px 0 0;
  font-size:clamp(2.4rem,6vw,5rem); text-shadow:0 2px 30px rgb(20 16 13/.4); max-width:24ch; }
.pk-hero h1 em{ font-style:italic; color:#f0e6d8; }
.pk-hero .pk-lede{ margin-top:20px; max-width:46ch; font-size:clamp(1rem,1.4vw,1.15rem); font-weight:300; opacity:.95; }
.pk-hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.pk-scrollcue{ position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2; color:#fff; opacity:.85;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; }
.pk-scrollcue .pk-line{ width:1px; height:42px; background:#fff; transform-origin:top; animation:pk-cue 2.4s var(--pk-ease) infinite; }
@keyframes pk-cue{ 0%{transform:scaleY(0);opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0;transform-origin:bottom} }

/* ---- Buttons ---- */
.pk-btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--pk-sans); font-size:.78rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; padding:15px 30px; border:1px solid transparent; cursor:pointer; transition:all .35s var(--pk-ease); }
.pk-btn-solid{ background:var(--pk-ink); color:#fff; }
.pk-btn-solid:hover{ background:#40352f; }
.pk-btn-ghost{ background:transparent; border-color:currentColor; color:inherit; }
.pk-btn-ghost:hover{ background:rgb(255 255 255/.14); }
.pk-btn-ink{ background:transparent; border-color:rgb(110 91 75/.4); color:var(--pk-ink); }
.pk-btn-ink:hover{ background:var(--pk-ink); color:#fff; border-color:var(--pk-ink); }

/* ---- Editorial section head ---- */
.pk-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:26px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,40px); }
.pk-head h2{ font-family:var(--pk-serif); font-weight:400; letter-spacing:-0.015em; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.05; margin:8px 0 0; }
.pk-head p{ color:var(--pk-muted); max-width:44ch; font-size:.98rem; margin:0; }

/* ---- Intro / about ---- */
.pk-intro{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(30px,6vw,84px); align-items:center; }
.pk-portrait{ aspect-ratio:4/5; overflow:hidden; background:linear-gradient(160deg,#d8c6b4,#7a6552); }
.pk-portrait img{ width:100%; height:100%; object-fit:cover; }
.pk-intro h2{ font-family:var(--pk-serif); font-weight:400; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-0.015em; margin:16px 0 22px; line-height:1.08; }
.pk-intro h2 em{ font-style:italic; color:var(--pk-clay); }
.pk-intro .pk-body{ color:var(--pk-soft); font-size:1.05rem; line-height:1.85; }
.pk-intro .pk-body p{ margin:0 0 16px; max-width:58ch; }
.pk-sign{ font-family:var(--pk-serif); font-style:italic; font-size:1.9rem; color:var(--pk-ink); margin-top:10px; }

/* ---- Editorial gallery ---- */
.pk-gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,20px); }
.pk-g{ position:relative; overflow:hidden; display:block; background:#efe7dc; }
.pk-g img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--pk-ease); }
.pk-g:hover img{ transform:scale(1.04); }
.pk-g::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgb(24 19 16/.5), transparent 48%); }
.pk-g figcaption{ position:absolute; left:0; bottom:0; z-index:2; color:#fff; padding:20px 22px; }
.pk-g figcaption .t{ font-family:var(--pk-serif); font-style:italic; font-size:1.5rem; line-height:1.1; text-shadow:0 1px 18px rgb(20 16 13/.5); }
.pk-g figcaption .s{ display:block; font-family:var(--pk-sans); font-weight:300; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; opacity:.9; margin-top:7px; }
/* Breite Kacheln strecken sich auf die Hoehe der Hochformat-Nachbarkachel
   (kein Leerraum unter der Reihe); die 4:5-Kacheln geben die Reihenhoehe vor. */
.pk-g1{ grid-column:span 7; }
.pk-g2{ grid-column:span 5; aspect-ratio:4/5; }
.pk-g3{ grid-column:span 5; aspect-ratio:4/5; }
.pk-g4{ grid-column:span 7; }
.pk-g5{ grid-column:span 12; aspect-ratio:21/8; }
/* Breite Panorama-Kachel: Bild an der Unterkante ausrichten, damit der
   "ONE"-Schriftzug des Geburtstagsbilds vollständig sichtbar bleibt. */
.pk-g5 img{ object-position:50% 100%; }

/* ---- Services (editorial list) ---- */
.pk-services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,2.6vw,40px); }
.pk-service{ display:block; border-top:1px solid var(--pk-line); padding-top:20px; color:inherit; }
.pk-service .n{ font-family:var(--pk-sans); font-size:.72rem; letter-spacing:.2em; color:var(--pk-muted); }
.pk-service h3{ font-family:var(--pk-serif); font-weight:500; font-size:clamp(1.5rem,2.2vw,2rem); margin:10px 0 8px; letter-spacing:-0.01em; }
.pk-service p{ color:var(--pk-soft); font-size:.96rem; line-height:1.7; margin:0 0 14px; }
.pk-service .more{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pk-clay); border-bottom:1px solid currentColor; padding-bottom:2px; }

/* ---- Quote ---- */
.pk-quote{ background:#f2ece1; text-align:center; }
.pk-quote blockquote{ font-family:var(--pk-serif); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.3; letter-spacing:-0.01em; color:var(--pk-ink); max-width:40ch; margin:0 auto; }
.pk-quote .by{ margin-top:26px; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--pk-muted); }
.pk-quote .by b{ color:var(--pk-clay); font-weight:400; }
/* sanfter Wechsel beim automatischen Bewertungs-Rotieren (alle 5 s) */
.pk-quote-fade{ animation:pk-fade .6s var(--pk-ease); }
@keyframes pk-fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---- Signature / trust marks ---- */
.pk-marks{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(26px,5vw,58px); padding-top:clamp(30px,5vw,44px); margin-top:clamp(34px,5vw,52px); border-top:1px solid var(--pk-line); }
.pk-mark{ font-family:var(--pk-serif); font-size:1.05rem; color:var(--pk-soft); text-align:center; line-height:1.35; max-width:20ch; }
.pk-mark b{ display:block; font-family:var(--pk-sans); font-weight:400; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--pk-muted); margin-top:6px; }

/* ---- Contact CTA (full-bleed) ---- */
.pk-contact{ position:relative; color:#fff; text-align:center; overflow:hidden; }
.pk-contact-media{ position:absolute; inset:0; z-index:0; background:linear-gradient(155deg,#8a6f58,#3d3026); }
.pk-contact-media img{ width:100%; height:100%; object-fit:cover; }
.pk-contact-scrim{ position:absolute; inset:0; z-index:1; background:rgb(34 27 22/.5); }
.pk-contact-inner{ position:relative; z-index:2; padding-block:clamp(84px,15vh,170px); }
.pk-contact h2{ font-family:var(--pk-serif); font-weight:400; font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-0.02em; margin:0 0 20px; }
.pk-contact h2 em{ font-style:italic; color:#f0e6d8; }
.pk-contact p{ max-width:48ch; margin:0 auto 34px; font-weight:300; font-size:1.08rem; opacity:.96; }

/* ---- Generic page hero (subpages) ---- */
.pk-pagehero{ position:relative; overflow:hidden; }
.pk-pagehero-media{ aspect-ratio:16/7; background:linear-gradient(155deg,#c9b19f,#6c5949); }
.pk-pagehero-media img{ width:100%; height:100%; object-fit:cover; }
.pk-pageintro{ padding-top:calc(clamp(64px,10vh,120px) + 40px); }

/* ---- Footer (dunkel, spaltig) ---- */
.pk-footer{ background:var(--pk-ink); color:#e7dccb; padding-block:clamp(56px,8vw,88px); }
.pk-footer .pk-fcols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(26px,3.5vw,52px); }
.pk-footer .pk-fcol{ display:flex; flex-direction:column; gap:11px; font-family:var(--pk-sans); font-weight:300; font-size:.88rem; }
.pk-footer .pk-fcol h4{ font-family:var(--pk-sans); font-weight:400; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:#c9ab8d; margin:0 0 6px; }
.pk-footer .pk-fcol a{ color:rgb(231 220 203/.82); transition:color .3s var(--pk-ease); }
.pk-footer .pk-fcol a:hover{ color:#fff; }
.pk-footer .pk-fcol span{ color:rgb(231 220 203/.5); }
.pk-footer .pk-fbrand{ font-family:var(--pk-serif); font-size:1.7rem; color:#fff; line-height:1; }
.pk-footer .pk-fbrand small{ display:block; font-family:var(--pk-sans); font-weight:300; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:rgb(231 220 203/.55); margin-top:8px; }
.pk-footer .pk-fnote{ font-family:var(--pk-sans); font-weight:300; font-size:.9rem; line-height:1.7; color:rgb(231 220 203/.72); max-width:36ch; margin:18px 0 0; }
.pk-footer .pk-flegal{ margin-top:clamp(38px,5vw,58px); padding-top:22px; border-top:1px solid rgb(255 255 255/.14); font-family:var(--pk-sans); font-size:.72rem; letter-spacing:.03em; color:rgb(231 220 203/.55); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pk-footer .pk-flegal a{ color:rgb(231 220 203/.72); }
.pk-footer .pk-flegal a:hover{ color:#fff; }
@media (max-width:760px){
  .pk-footer .pk-fcols{ grid-template-columns:1fr 1fr; }
  .pk-footer .pk-fcol-brand{ grid-column:1 / -1; }
}

/* ---- Reveal (additive) ---- */
.pk-reveal{ opacity:1; }
@keyframes pk-rise{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none} }
.pk-reveal.pk-in{ animation:pk-rise .9s var(--pk-ease) both; }

/* ---- Responsive ---- */
@media (max-width:860px){
  .pk-navlinks{ display:none; }
  .pk-burger{ display:block; }
  .pk-intro{ grid-template-columns:1fr; gap:34px; }
  .pk-portrait{ max-width:420px; }
  .pk-g1,.pk-g2,.pk-g3,.pk-g4,.pk-g5{ grid-column:span 12; }
  .pk-g1,.pk-g4{ aspect-ratio:3/2; } .pk-g2,.pk-g3{ aspect-ratio:4/3; } .pk-g5{ aspect-ratio:16/10; }

  /* Mobile-Menü: zentriertes, kompaktes Feld (nicht die ganze Seite) */
  .pk-mobilemenu{
    display:flex; flex-direction:column; text-align:center;
    position:fixed; left:0; right:0; top:0; z-index:90;
    padding:90px clamp(22px,7vw,44px) 30px;
    background:var(--pk-bg);
    box-shadow:0 26px 44px -20px rgb(43 35 32/.5);
    transform:translateY(-102%); transition:transform .45s var(--pk-ease);
    max-height:100svh; overflow-y:auto;
  }
  /* Marke + Hamburger sichtbar/klickbar ÜBER dem offenen Menü halten */
  .pk-nav .pk-brand{ position:relative; z-index:95; }
  .pk-nav .pk-burger{ z-index:95; }
  .pk-mobilemenu.open{ transform:translateY(0); }
  /* Alle Einträge gleich groß, zentriert */
  .pk-mobilemenu a{ font-family:var(--pk-serif); font-size:1.5rem; color:var(--pk-ink); padding:12px 0; border-bottom:1px solid var(--pk-line); text-align:center; }
  .pk-mobilemenu a:hover{ color:var(--pk-clay); }
  .pk-mobilemenu .pk-mobilemenu-sub{ font-size:1.5rem; color:var(--pk-ink); }
  .pk-mobilemenu .pk-mobilemenu-label{ text-align:center; margin:16px 0 2px; }
  .pk-mobilemenu .pk-mobilemenu-cta{
    border:1px solid var(--pk-ink); color:var(--pk-ink); font-family:var(--pk-sans);
    font-size:.8rem; text-transform:uppercase; letter-spacing:.14em;
    padding:15px; text-align:center; margin-top:22px; border-bottom:1px solid var(--pk-ink);
  }
  .pk-mobilemenu .pk-mobilemenu-cta:hover{ background:var(--pk-ink); color:#fff; }
  .pk-footer .pk-fcols{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .pk-reveal.pk-in{ animation:none; } .pk-scrollcue .pk-line{ animation:none; } .pk-g:hover img{ transform:none; }
}

/* ---- Portfolio: Filter-Chips im pk-Stil ---- */
.pk-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.pk-chip{ border:1px solid var(--pk-line); background:transparent; color:var(--pk-soft);
  padding:9px 16px; font-family:var(--pk-sans); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; transition:all .3s var(--pk-ease); }
.pk-chip:hover{ border-color:var(--pk-clay); color:var(--pk-clay); }
.pk-chip.active{ background:var(--pk-ink); color:#fff; border-color:var(--pk-ink); }

/* ---- About: beige Karte hinter dem Bild, Text hineingezogen ---- */
.pk-about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; align-items:center; }
.pk-about-photo{ position:relative; z-index:2; aspect-ratio:3/4; overflow:hidden;
  background:linear-gradient(160deg,#d8c6b4,#7a6552); box-shadow:0 26px 60px -30px rgb(43 35 32/.55); }
.pk-about-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.pk-about-card{ position:relative; z-index:1; align-self:stretch; background:#e7ddce;
  display:flex; flex-direction:column; justify-content:center;
  margin-left:-14%; padding:clamp(40px,6vw,80px) clamp(30px,4vw,64px);
  padding-left:calc(14% + clamp(30px,4vw,60px)); }
.pk-about-card .pk-kicker{ color:var(--pk-clay); }
.pk-about-card h2{ font-family:var(--pk-serif); font-weight:400; letter-spacing:-0.01em;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.1; margin:12px 0 0; color:var(--pk-ink); }
.pk-about-divider{ height:1px; background:var(--pk-line); margin:22px 0 24px; width:min(300px,60%); }
.pk-about-card .pk-body{ color:var(--pk-soft); font-size:1.02rem; line-height:1.85; }
.pk-about-card .pk-body p{ margin:0 0 14px; }
@media (max-width:860px){
  .pk-about-grid{ grid-template-columns:1fr; }
  .pk-about-photo{ max-width:430px; margin:0 auto; width:100%; }
  .pk-about-card{ margin-left:0; margin-top:-46px; padding:56px clamp(26px,7vw,40px) 40px; }
  .pk-about-divider{ width:min(260px,70%); }
}

/* ---- About: "Meine Geschichte" im beigen Rahmen ---- */
.pk-story-card{ background:#e7ddce; padding:clamp(38px,5vw,68px) clamp(28px,4.5vw,60px); }
.pk-story-card .pk-story-quote{ font-family:var(--pk-serif); font-style:italic; font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.3; letter-spacing:-0.01em; color:var(--pk-ink); margin:14px 0 26px; }
.pk-story-card .pk-body{ color:var(--pk-soft); font-size:1.05rem; line-height:1.85; }
.pk-story-card .pk-body > div{ margin-bottom:14px; }

/* ---- About + Geschichte: EIN durchgehender beiger Hintergrund ---- */
.pk-aboutstory{ background:#e7ddce; }
.pk-aboutstory .pk-about-card{ background:transparent; }        /* blendet in den Sektions-Beige */
.pk-aboutstory .pk-story-card{ background:transparent; padding:clamp(30px,4vw,56px) 0 0;
  margin-left:clamp(0px,20%,280px); max-width:760px; }          /* leicht versetzt / "schräg" */
@media (max-width:860px){
  .pk-aboutstory .pk-story-card{ margin-left:0; padding-top:20px; }
}

/* ---- Startseite: Pakete-Sektion (Standard / Premium) ---- */
/* Pakete: kompakt und kräftig – wenig Leerraum, markante Linien. */
.pk-packages{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.pk-package{ border-top:2px solid var(--pk-ink); padding-top:16px; }
.pk-package .tier{ display:block; font-family:var(--pk-sans); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--pk-soft); }
.pk-package .price{ font-family:var(--pk-serif); font-weight:400; font-size:clamp(2.8rem,6vw,4.6rem); line-height:1; color:var(--pk-ink); margin:8px 0 12px; }
.pk-package .desc{ color:var(--pk-soft); font-size:1rem; line-height:1.7; max-width:46ch; margin:0; }
.pk-package-note{ margin-top:clamp(22px,3vw,36px); background:#f2ece1; padding:clamp(22px,3vw,34px) clamp(22px,3.5vw,42px); }
#pakete{ padding-block:clamp(48px,7vh,92px); }
#pakete .pk-head{ margin-bottom:clamp(20px,3vw,36px); }
.pk-package-note h3{ font-family:var(--pk-serif); font-weight:400; font-size:clamp(1.4rem,2.6vw,2.1rem); letter-spacing:-0.01em; color:var(--pk-ink); margin:0 0 10px; }
.pk-package-note p{ color:var(--pk-soft); line-height:1.8; max-width:72ch; margin:0; font-size:1rem; }
@media (max-width:760px){ .pk-packages{ grid-template-columns:1fr; gap:34px; } }


.floating-nav .nav-leistungen {
  position: static;
  display: inline-flex;
}
.floating-nav summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  cursor: pointer;
}
.floating-nav summary::-webkit-details-marker { display: none; }
.floating-nav summary:hover,
.floating-nav .nav-leistungen[open] summary { background: var(--bg-base); }
.floating-nav .nav-leistungen-menu {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: 0 10px 30px -5px rgb(74 59 42 / 0.2);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}
.floating-nav .nav-leistungen-menu a {
  width: auto;
  height: auto;
  justify-content: flex-start;
  padding: 11px 14px;
  border-radius: 12px;
  white-space: nowrap;
}

.button-outline {
  width: 100%;
  border: 1px solid var(--accent-brown);
  border-radius: 16px;
  padding: 13px;
  background: transparent;
  color: var(--accent-brown);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.button-outline:hover {
  filter: none;
  background: rgb(110 91 75 / 0.07);
}

.faq-static-grid {
  align-items: start;
}

.faq-static-item {
  padding: 20px 22px;
}

.faq-static-item summary {
  cursor: pointer;
  list-style: none;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
}

.faq-static-item summary::-webkit-details-marker {
  display: none;
}

.faq-static-item p {
  margin: 14px 0 0;
}

[hidden] {
  display: none !important;
}

/* --- Testimonial-Avatar Fallback (Initialen-Kreis) --- */
.testimonial-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-brown, #8a6a4f);
  background: var(--bg-base, #f0e9df);
}

/* --- Landingpages --- */
.landing-breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.landing-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.landing-breadcrumb a:hover {
  text-decoration: underline;
}
.services-more-link {
  display: inline-block;
  text-decoration: none;
  color: var(--accent-brown, #8a6a4f);
}
.services-more-link:hover {
  text-decoration: underline;
}
.service-card {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 46px -22px rgb(74 59 42 / 0.4);
}
.service-card:hover .services-more-link {
  text-decoration: underline;
}
.portfolio-home-tile {
  aspect-ratio: 1 / 1;
  min-height: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.portfolio-home-tile img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.portfolio-home-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 42px -20px rgb(74 59 42 / 0.45);
}
.portfolio-home-tile:hover img {
  transform: scale(1.06);
}
.portfolio-home-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 14px 15px;
  background: linear-gradient(to top, rgb(38 30 22 / 0.78), rgb(38 30 22 / 0));
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.portfolio-home-tile:hover .portfolio-home-caption,
.portfolio-home-tile:focus-visible .portfolio-home-caption {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .portfolio-home-caption {
    opacity: 1;
    transform: translateY(0);
    padding-top: 28px;
  }
}
@media (max-width: 900px) {
  .portfolio-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .portfolio-home-grid .portfolio-home-tile {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
  .portfolio-home-grid .portfolio-home-tile img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card:hover,
  .portfolio-home-tile,
  .portfolio-home-tile:hover,
  .portfolio-home-tile img,
  .portfolio-home-tile:hover img {
    transform: none;
    transition: none;
  }
}
.landing-related-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.landing-related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(60, 44, 32, 0.16);
}
.landing-related-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.landing-related-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.landing-related-card:hover .landing-related-media img {
  transform: scale(1.05);
}
.landing-related-price {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-brown);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.landing-related-body {
  display: block;
  padding: 20px 22px 24px;
}
.landing-related-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-brown);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.landing-related-card:hover .landing-related-cta svg {
  transform: translateX(3px);
}
.landing-related-cta svg {
  transition: transform 0.22s ease;
}
.google-reviews-link {
  align-items: center;
  gap: 9px;
}
.google-reviews-link svg {
  flex: 0 0 auto;
}
.reviews-carousel {
  margin-top: 8px;
}
.reviews-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.reviews-viewport {
  flex: 1 1 auto;
  overflow: hidden;
}
.reviews-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}
.reviews-slide-item {
  flex: 0 0 33.3333%;
  display: flex;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}
.reviews-slide-item > article {
  max-width: 420px;
  width: 100%;
  height: 100%;
}
.reviews-nav {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--brand-border, #e4dcd2);
  background: #fff;
  color: #4a4038;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}
.reviews-nav:hover {
  background: #f4efe8;
  transform: scale(1.05);
}
.portfolio-lead {
  max-width: 540px;
  margin: 0;
  min-height: 3.2em;
}
@media (max-width: 640px) {
  .portfolio-lead {
    min-height: 4.5em;
  }
  .reviews-slide-item {
    flex: 0 0 100%;
    padding: 4px;
  }
  .reviews-slide-item > article {
    max-width: 640px;
  }
  .reviews-nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .reviews-row {
    gap: 8px;
  }
}

/* --- Paket-Karten: Scroll-Reveal + Hover-Lift --- */
.paket-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.paket-card.paket-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.paket-card.paket-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.paket-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -12px rgb(74 59 42 / 0.28);
}
.paket-card-media img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.paket-card:hover .paket-card-media img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .paket-card,
  .paket-card.paket-reveal,
  .paket-card-media img {
    transition: none;
  }
  .paket-card.paket-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- Footer-Leistungen-Navigation --- */
.footer-leistungen-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .footer-leistungen-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    max-width: 420px;
    margin-inline: auto;
    margin-bottom: 20px;
  }
  .footer-leistungen-nav a {
    text-align: center;
  }
}