/* Tausendschön – Kontaktbereich Startseite: Head/Text/Formular über volle Breite
   Einfügen unter: Design > Customizer > Zusätzliches CSS
   oder: Design > Editor > Styles > Zusätzliches CSS
*/

:root {
  --ts-logo-red: #a43a50;
  --ts-logo-red-soft: rgba(164, 58, 80, .11);
  --ts-logo-red-line: rgba(164, 58, 80, .18);
}

/* Kontaktbereich insgesamt feiner und auf Contentbreite zentriert */
#kontakt.ts-contact-panel,
.ts-contact-panel#kontakt {
  width: min(1120px, calc(100vw - 42px)) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(1.05rem, 2.2vw, 1.8rem) !important;

  padding: clamp(1.7rem, 4vw, 3.2rem) !important;
  border-radius: clamp(28px, 4vw, 48px) !important;
  border: 1px solid var(--ts-logo-red-line) !important;

  background:
    radial-gradient(circle at 94% 8%, rgba(164,58,80,.105) 0 12rem, transparent 12.1rem),
    radial-gradient(circle at 6% 96%, rgba(241,223,228,.62) 0 15rem, transparent 15.1rem),
    linear-gradient(135deg, rgba(255,250,247,.94), rgba(255,255,255,.78)) !important;

  box-shadow: 0 18px 52px rgba(76,57,65,.075) !important;
  color: var(--ts-ink, #4c3941) !important;
}

/* alle direkten Bereiche laufen über die volle Breite */
#kontakt.ts-contact-panel > *,
.ts-contact-panel#kontakt > * {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Head/Intro nicht als schmale Spalte, sondern fein über die Fläche */
#kontakt.ts-contact-panel > .wp-block-group:first-child,
.ts-contact-panel#kontakt > .wp-block-group:first-child {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

#kontakt .ts-kicker,
#kontakt .ts-eyebrow {
  color: var(--ts-logo-red) !important;
  letter-spacing: .14em !important;
  font-size: .78rem !important;
  margin-bottom: .55rem !important;
}

#kontakt h2,
#kontakt .ts-section-title {
  max-width: 980px !important;
  margin-bottom: .75rem !important;
  color: var(--ts-ink, #4c3941) !important;
  font-size: clamp(2.25rem, 4.6vw, 4.35rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

#kontakt .ts-text,
#kontakt p {
  max-width: 980px !important;
  color: rgba(76,57,65,.72) !important;
}

/* Der alte Mail-Button darf bleiben, wirkt aber feiner */
#kontakt .ts-button-row {
  margin-top: 1.15rem !important;
}

#kontakt .wp-block-button__link {
  min-height: 2.95rem !important;
  padding: .78rem 1.25rem !important;
  border-radius: 999px !important;
  font-size: .92rem !important;
  box-shadow: 0 12px 28px rgba(164,58,80,.12) !important;
}

/* Kontaktdaten als ruhige Zeile unter dem Intro */
#kontakt .ts-contact-details {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .85rem !important;
  padding: 0 !important;
  margin: .25rem 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#kontakt .ts-contact-details span {
  display: block !important;
  min-height: 100% !important;
  padding: 1rem 1.1rem !important;
  border-radius: 22px !important;
  border: 1px solid var(--ts-logo-red-line) !important;
  background: rgba(255,255,255,.64) !important;
  box-shadow: 0 10px 24px rgba(76,57,65,.045) !important;
}

#kontakt .ts-contact-details strong {
  display: block !important;
  margin-bottom: .25rem !important;
  color: var(--ts-logo-red) !important;
  font-size: .82rem !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#kontakt .ts-contact-details a {
  color: var(--ts-ink, #4c3941) !important;
  font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Fluent-Form-Bereich über komplette Breite */
#kontakt .ts-contact-form-slot {
  width: 100% !important;
  max-width: none !important;
  margin-top: .5rem !important;
  padding: clamp(1.15rem, 2.7vw, 2rem) !important;
  border-radius: clamp(24px, 3vw, 34px) !important;
  border: 1px solid var(--ts-logo-red-line) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,250,247,.84)) !important;
  box-shadow: 0 18px 42px rgba(76,57,65,.06) !important;
}

#kontakt .ts-contact-form-slot > p:first-child {
  margin: 0 0 .85rem !important;
  max-width: none !important;
  color: rgba(76,57,65,.58) !important;
  font-size: .9rem !important;
}

/* Fluent Forms: volle Breite, feine Inputs */
#kontakt .ts-contact-form-slot .fluentform,
#kontakt .ts-contact-form-slot .frm-fluent-form,
#kontakt .ts-contact-form-slot form {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#kontakt .ts-contact-form-slot .ff-el-group {
  margin-bottom: 1rem !important;
}

#kontakt .ts-contact-form-slot input,
#kontakt .ts-contact-form-slot textarea,
#kontakt .ts-contact-form-slot select {
  width: 100% !important;
  min-height: 3rem !important;
  border-radius: 18px !important;
  border: 1px solid rgba(164,58,80,.18) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
}

#kontakt .ts-contact-form-slot textarea {
  min-height: 8.5rem !important;
}

#kontakt .ts-contact-form-slot input:focus,
#kontakt .ts-contact-form-slot textarea:focus,
#kontakt .ts-contact-form-slot select:focus {
  border-color: rgba(164,58,80,.42) !important;
  box-shadow: 0 0 0 3px rgba(164,58,80,.09) !important;
}

#kontakt .ts-contact-form-slot button,
#kontakt .ts-contact-form-slot .ff-btn-submit,
#kontakt .ts-contact-form-slot input[type="submit"] {
  min-height: 3rem !important;
  padding: .82rem 1.45rem !important;
  border-radius: 999px !important;
  border-color: var(--ts-logo-red) !important;
  background: var(--ts-logo-red) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 30px rgba(164,58,80,.18) !important;
}

#kontakt .ts-contact-form-slot button:hover,
#kontakt .ts-contact-form-slot .ff-btn-submit:hover,
#kontakt .ts-contact-form-slot input[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(.97);
}

/* Tablet */
@media (max-width: 860px) {
  #kontakt.ts-contact-panel,
  .ts-contact-panel#kontakt {
    width: min(100% - 28px, 720px) !important;
    padding: 1.4rem !important;
  }

  #kontakt .ts-contact-details {
    grid-template-columns: 1fr !important;
  }
}

/* Smartphone */
@media (max-width: 520px) {
  #kontakt.ts-contact-panel,
  .ts-contact-panel#kontakt {
    width: min(100% - 22px, 480px) !important;
    border-radius: 28px !important;
  }

  #kontakt h2,
  #kontakt .ts-section-title {
    font-size: clamp(2.05rem, 13vw, 3.15rem) !important;
  }

  #kontakt .ts-contact-form-slot {
    padding: 1rem !important;
    border-radius: 22px !important;
  }
}
/* =========================================================
   HERO – Lesbarkeit verbessern
   ========================================================= */

/* Großer roséfarbener Hintergrundkreis weicher / transparenter */
.ts-hero-2026::before {
  background: rgba(229, 205, 216, 0.24) !important;
}

.ts-hero-2026::after {
  background: rgba(255, 255, 255, 0.32) !important;
  border-color: rgba(154, 118, 133, 0.06) !important;
}

/* Hamburg-Altona-Karte etwas transparenter und optisch leichter */
.ts-hero-2026__door-card {
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.74),
    rgba(251, 246, 248, 0.62)
  ) !important;
  box-shadow:
    0 14px 34px rgba(80, 63, 69, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.82) inset !important;
  border-color: rgba(156, 112, 129, 0.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 3 !important;
}

/* Bild in der Hamburg-Altona-Karte etwas ruhiger */
.ts-hero-2026__door-card img {
  opacity: 0.92;
}

/* Die Textkarte "Zeit für Dich ..." klar nach vorne holen */
.ts-hero-2026__note {
  z-index: 6 !important;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(250, 244, 247, 0.93)
  ) !important;
  box-shadow:
    0 20px 52px rgba(80, 63, 69, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.96) inset !important;
  border-color: rgba(156, 112, 129, 0.18) !important;
}

/* Text in der Note noch besser lesbar */
.ts-hero-2026__note span {
  text-shadow:
    0 1px 0 rgba(255,255,255,0.96),
    0 0 10px rgba(255,255,255,0.42);
}

/* Optional: Hamburg-Altona-Karte leicht weiter nach unten/links,
   damit sie die Note weniger "schneidet" */
@media (min-width: 1100px) {
  .ts-hero-2026__door-card {
    left: -4% !important;
    bottom: 1% !important;
    width: min(88%, 430px) !important;
  }

  .ts-hero-2026__note {
    right: 2% !important;
    bottom: 23% !important;
  }
}

/* =========================================================
   TAUSENDSCHÖN OPTIMIERT 2.1
   Einheitliche Breiten, Abstände, zentrierte Karten und Anker
   ========================================================= */

:root {
  --ts-content-width: 1128px;
  --ts-page-gutter: clamp(1rem, 3vw, 1.5rem);
  --ts-section-gap: clamp(4.25rem, 7.2vw, 7rem);
  --ts-section-gap-mobile: clamp(3.25rem, 12vw, 4.75rem);
  --ts-header-offset: 96px;
}

html {
  scroll-padding-top: var(--ts-header-offset);
}

body.admin-bar {
  --ts-header-offset: 128px;
}

/* Hero und sämtliche Inhaltsbereiche bekommen exakt dieselbe Außenbreite. */
.ts-hero-2026 {
  --ts-wide: var(--ts-content-width) !important;
}

.ts-hero-2026__inner,
.ts-section,
.ts-header-inner,
.ts-footer-inner,
.ts-header > .alignwide,
.ts-header .ts-header-fine-inner,
.ts-header .wp-block-group.alignwide {
  width: min(var(--ts-content-width), calc(100% - (2 * var(--ts-page-gutter)))) !important;
  max-width: var(--ts-content-width) !important;
  margin-inline: auto !important;
}

/* Verlässlicher Ankerabstand unter dem sticky Header. */
#leistungen,
#wellness-verschenken,
#maren,
#team,
#kontakt,
.ts-anchor-target {
  scroll-margin-top: calc(var(--ts-header-offset) + 18px) !important;
}

.ts-anchor-target {
  display: block;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Einheitlicher Rhythmus zwischen allen Startseitenblöcken. */
.ts-page-shell > .ts-section,
.ts-page-shell > section.ts-section {
  margin-block: 0 !important;
}

.ts-page-shell > .ts-section + .ts-section,
.ts-page-shell > .ts-hero-2026 + .ts-section,
.ts-page-shell > .ts-hero + .ts-section {
  margin-top: var(--ts-section-gap) !important;
}

/* Ruhiger Innenabstand für Überschrift und Karten. */
.ts-section-head {
  margin-bottom: clamp(1.65rem, 3.1vw, 2.75rem) !important;
  gap: clamp(1.25rem, 3vw, 3.25rem) !important;
}

.ts-section-head .ts-section-title,
.ts-section-head h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ts-section-head .ts-text,
.ts-section-head > p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Leistungen: auf Breitbild als geschlossene, exakt zentrierte Kartengruppe. */
#leistungen .ts-service-grid,
.ts-service-grid,
.wp-block-group.ts-service-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 340px)) !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: clamp(1.1rem, 2.2vw, 1.65rem) !important;
  width: 100% !important;
  max-width: var(--ts-content-width) !important;
  margin-inline: auto !important;
}

#leistungen .ts-service-card,
.ts-service-card,
.wp-block-group.ts-service-card {
  width: 100% !important;
  max-width: 340px !important;
  margin: 0 auto !important;
}

.ts-service-card .ts-card-body {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.ts-service-card .ts-card-body > p:last-child {
  margin-top: auto !important;
  padding-top: .75rem !important;
}

/* Teamkarten folgen demselben visuellen Raster. */
.ts-team-grid,
.wp-block-group.ts-team-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 340px)) !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: clamp(1.1rem, 2.2vw, 1.65rem) !important;
  width: 100% !important;
}

.ts-team-card,
.wp-block-group.ts-team-card {
  width: 100% !important;
  max-width: 340px !important;
  margin-inline: auto !important;
}

/* Kontaktpanel ebenfalls exakt auf Inhaltsbreite. */
#kontakt.ts-contact-panel,
.ts-contact-panel#kontakt {
  width: min(var(--ts-content-width), calc(100% - (2 * var(--ts-page-gutter)))) !important;
  max-width: var(--ts-content-width) !important;
}

/* Standardseiten: gleiche vertikale Grundabstände. */
.ts-main-template {
  width: min(var(--ts-content-width), calc(100% - (2 * var(--ts-page-gutter))));
  margin-inline: auto;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.ts-main-template > *:first-child {
  margin-top: 0 !important;
}

.ts-main-template > *:last-child {
  margin-bottom: 0 !important;
}

/* Dezenter Fokuszustand für Tastaturnutzung. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(164, 58, 80, .22);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  :root {
    --ts-header-offset: 88px;
  }

  body.admin-bar {
    --ts-header-offset: 134px;
  }

  #leistungen .ts-service-grid,
  .ts-service-grid,
  .wp-block-group.ts-service-grid,
  .ts-team-grid,
  .wp-block-group.ts-team-grid {
    grid-template-columns: repeat(2, minmax(0, 340px)) !important;
  }

  /* Bei drei Karten sitzt die letzte Karte sauber mittig. */
  #leistungen .ts-service-grid > :last-child:nth-child(odd),
  .ts-service-grid > :last-child:nth-child(odd),
  .ts-team-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
  }
}

@media (max-width: 680px) {
  :root {
    --ts-page-gutter: .875rem;
    --ts-header-offset: 82px;
  }

  .ts-page-shell > .ts-section + .ts-section,
  .ts-page-shell > .ts-hero-2026 + .ts-section,
  .ts-page-shell > .ts-hero + .ts-section {
    margin-top: var(--ts-section-gap-mobile) !important;
  }

  #leistungen .ts-service-grid,
  .ts-service-grid,
  .wp-block-group.ts-service-grid,
  .ts-team-grid,
  .wp-block-group.ts-team-grid {
    grid-template-columns: minmax(0, 390px) !important;
  }

  #leistungen .ts-service-grid > :last-child:nth-child(odd),
  .ts-service-grid > :last-child:nth-child(odd),
  .ts-team-grid > :last-child:nth-child(odd) {
    grid-column: auto !important;
  }

  .ts-service-card,
  .wp-block-group.ts-service-card,
  .ts-team-card,
  .wp-block-group.ts-team-card {
    max-width: 390px !important;
  }
}


/* =========================================================
   TAUSENDSCHÖN 3.1.1 – BEHUTSAMES ABSTANDSRASTER
   Basis und Look & Feel bleiben vollständig Version 3.1.0.
   Hier werden ausschließlich Breiten, Außen- und Innenabstände
   sowie responsive Zwischenräume vereinheitlicht.
   ========================================================= */

:root {
  --ts-311-content-width: 1120px;
  --ts-311-page-gutter: clamp(1rem, 3vw, 1.75rem);
  --ts-311-section-gap: clamp(3.75rem, 7vw, 6.5rem);
  --ts-311-section-head-gap: clamp(1.25rem, 3vw, 2.5rem);
  --ts-311-panel-padding: clamp(1.35rem, 3vw, 2.75rem);
}

/* Einheitliche Seitenränder und Inhaltsbreite */
.ts-page-shell > .ts-section,
.ts-section,
.ts-main-template,
.ts-gb-page,
.ts-voucher-page,
.ts-offer-page,
.ts-clarity-page {
  width: min(var(--ts-311-content-width), calc(100% - (2 * var(--ts-311-page-gutter)))) !important;
  max-width: var(--ts-311-content-width) !important;
  margin-inline: auto !important;
}

/* Ruhiger, aber nicht veränderter Seitenrhythmus */
.ts-page-shell > .ts-section + .ts-section,
.ts-section + .ts-section {
  margin-top: var(--ts-311-section-gap) !important;
}

.ts-page-shell {
  padding-bottom: clamp(2rem, 4.5vw, 4rem);
}

/* Bereichsüberschriften: nur Abstände und Ausrichtung */
.ts-section-head {
  gap: var(--ts-311-section-head-gap) !important;
  margin-bottom: clamp(1.45rem, 3vw, 2.35rem) !important;
}

.ts-section-head > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Header und Footer bleiben optisch gleich, erhalten nur saubere Außenränder */
.ts-header > .alignwide,
.ts-header .ts-header-fine-inner,
.ts-header .wp-block-group.alignwide,
.ts-footer > .alignwide,
.ts-footer .ts-footer-fine-inner,
.ts-footer .wp-block-group.alignwide {
  width: min(1080px, calc(100% - (2 * var(--ts-311-page-gutter)))) !important;
  max-width: 1080px !important;
  margin-inline: auto !important;
}

/* Hero: lediglich vertikale Luft und Spaltenabstand harmonisieren */
#start.ts-hero,
.ts-hero {
  padding-top: clamp(3.25rem, 6.5vw, 6rem) !important;
  padding-bottom: clamp(2.6rem, 5vw, 4.5rem) !important;
}

.ts-hero-grid {
  gap: clamp(2rem, 5vw, 5rem) !important;
}

.ts-hero-copy > *:first-child,
.ts-hero-visual > *:first-child {
  margin-top: 0 !important;
}

.ts-hero .ts-button-row,
.ts-hero-2026 .ts-hero-2026__actions {
  margin-top: clamp(1.2rem, 2.5vw, 1.75rem) !important;
}

/* Kartenraster: gleichmäßige Zwischenräume, Gestaltung unverändert */
.ts-service-grid,
.wp-block-group.ts-service-grid,
.ts-team-grid,
.wp-block-group.ts-team-grid {
  gap: clamp(1rem, 2vw, 1.45rem) !important;
}

.ts-service-card .ts-card-body,
.ts-card-body {
  padding: clamp(1rem, 1.8vw, 1.3rem) !important;
}

.ts-service-card .ts-card-body > *:first-child,
.ts-team-card > *:first-child {
  margin-top: 0 !important;
}

.ts-service-card .ts-card-body > *:last-child,
.ts-team-card > *:last-child {
  margin-bottom: 0 !important;
}

/* Maren und Gutschein: nur Innen- und Spaltenabstände */
#maren.ts-maren-section,
.ts-maren-section,
.ts-gift-band,
#wellness-verschenken.ts-gift-band {
  padding: var(--ts-311-panel-padding) !important;
}

.ts-maren-grid,
.ts-gift-band,
#wellness-verschenken.ts-gift-band {
  gap: clamp(1.75rem, 4.5vw, 4.25rem) !important;
}

.ts-maren-grid > *,
.ts-gift-band > * {
  min-width: 0;
}

.ts-maren-grid .ts-text,
.ts-gift-band .ts-text {
  margin-top: .95rem !important;
}

.ts-list {
  margin-top: 1.1rem !important;
}

/* Kontakt: kompaktere, konsistente Abstände ohne visuelle Neugestaltung */
#kontakt.ts-contact-panel,
.ts-contact-panel#kontakt {
  width: min(var(--ts-311-content-width), calc(100% - (2 * var(--ts-311-page-gutter)))) !important;
  max-width: var(--ts-311-content-width) !important;
  gap: clamp(1rem, 2.2vw, 1.65rem) !important;
  padding: var(--ts-311-panel-padding) !important;
}

#kontakt .ts-button-row {
  margin-top: 1.05rem !important;
}

#kontakt .ts-contact-details {
  gap: .8rem !important;
}

#kontakt .ts-contact-form-slot {
  margin-top: .25rem !important;
  padding: clamp(1.05rem, 2.3vw, 1.75rem) !important;
}

/* Unterseiten: gleicher Seitenanfang und gleichmäßige Abschnittsabstände */
.ts-main-template {
  padding-top: clamp(2.75rem, 5.5vw, 5.25rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5.75rem) !important;
}

.ts-main-template > *:first-child,
.ts-gb-page > *:first-child,
.ts-voucher-page > *:first-child,
.ts-offer-page > *:first-child,
.ts-clarity-page > *:first-child {
  margin-top: 0 !important;
}

.ts-main-template > *:last-child,
.ts-gb-page > *:last-child,
.ts-voucher-page > *:last-child,
.ts-offer-page > *:last-child,
.ts-clarity-page > *:last-child {
  margin-bottom: 0 !important;
}

.ts-gb-page {
  padding-block: clamp(2.5rem, 5vw, 4.75rem) !important;
}

.ts-gb-hero {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
  padding: clamp(1.35rem, 3vw, 2.75rem) !important;
}

.ts-gb-section {
  margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
  padding: clamp(1.2rem, 2.5vw, 2.25rem) !important;
}

.ts-gb-section-head {
  margin-bottom: clamp(1rem, 2.2vw, 1.7rem) !important;
}

.ts-gb-grid,
.ts-gb-image-row,
.wp-block-columns.ts-gb-image-row {
  gap: clamp(.9rem, 1.8vw, 1.35rem) !important;
}

/* Tablet: weiterhin vertraute Optik, nur kompakteres Raster */
@media (max-width: 980px) {
  :root {
    --ts-311-section-gap: clamp(3.25rem, 7vw, 4.75rem);
  }

  .ts-section-head {
    gap: 1rem !important;
  }

  .ts-hero-grid {
    gap: clamp(1.5rem, 4vw, 3rem) !important;
  }

  .ts-maren-grid,
  .ts-gift-band,
  #wellness-verschenken.ts-gift-band {
    gap: clamp(1.5rem, 4vw, 3rem) !important;
  }
}

/* Smartphone: verlässliche Seitenränder und weniger unnötiger Leerraum */
@media (max-width: 760px) {
  :root {
    --ts-311-page-gutter: .8rem;
    --ts-311-section-gap: 3.35rem;
    --ts-311-panel-padding: 1.1rem;
  }

  .ts-page-shell {
    padding-bottom: 1.75rem;
  }

  #start.ts-hero,
  .ts-hero {
    padding-top: 2.65rem !important;
    padding-bottom: 2.15rem !important;
  }

  .ts-hero-grid {
    gap: 1.8rem !important;
  }

  .ts-section-head {
    margin-bottom: 1.35rem !important;
  }

  .ts-service-grid,
  .wp-block-group.ts-service-grid,
  .ts-team-grid,
  .wp-block-group.ts-team-grid {
    gap: 1rem !important;
  }

  .ts-maren-grid,
  .ts-gift-band,
  #wellness-verschenken.ts-gift-band {
    gap: 1.5rem !important;
  }

  #kontakt.ts-contact-panel,
  .ts-contact-panel#kontakt {
    width: calc(100% - 1rem) !important;
  }

  .ts-main-template,
  .ts-gb-page,
  .ts-voucher-page,
  .ts-offer-page,
  .ts-clarity-page {
    width: calc(100% - 1.1rem) !important;
  }

  .ts-gb-hero,
  .ts-gb-section {
    padding: 1.1rem !important;
  }

  .ts-footer > .alignwide,
  .ts-footer .ts-footer-fine-inner,
  .ts-footer .wp-block-group.alignwide {
    width: calc(100% - 1rem) !important;
  }
}

/* =========================================================
   3.1.6 – STAGECOLOR TEASER UND GUTENBERG-EDITOR
   ========================================================= */

.ts-brand-visual--stagecolor,
.editor-styles-wrapper .ts-brand-visual--stagecolor {
  position: relative;
  min-height: clamp(360px, 44vw, 520px);
  padding: 0;
  overflow: hidden;
  background: #0b0b0d;
}

.ts-brand-visual--stagecolor::after,
.editor-styles-wrapper .ts-brand-visual--stagecolor::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 48%, rgba(5, 5, 7, .72) 100%);
  pointer-events: none;
}

.ts-brand-visual--stagecolor .ts-brand-visual--photo,
.editor-styles-wrapper .ts-brand-visual--stagecolor .ts-brand-visual--photo {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.ts-brand-visual--stagecolor .ts-brand-visual--photo img,
.editor-styles-wrapper .ts-brand-visual--stagecolor .ts-brand-visual--photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center;
}

.ts-brand-visual--stagecolor .ts-stagecolor-logo,
.editor-styles-wrapper .ts-brand-visual--stagecolor .ts-stagecolor-logo {
  position: absolute;
  z-index: 2;
  right: 1.15rem;
  bottom: 1.15rem;
  width: min(58%, 245px) !important;
  margin: 0 !important;
  padding: .75rem 1rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}

.ts-brand-visual--stagecolor .ts-stagecolor-logo img,
.editor-styles-wrapper .ts-brand-visual--stagecolor .ts-stagecolor-logo img {
  display: block;
  width: 100% !important;
  height: auto !important;
}

/* Gutenberg fügt zwischen Gruppenblock und inneren Blöcken eigene Wrapper ein.
   Das Raster liegt deshalb im Editor auf dem Inner-Blocks-Container. */
.editor-styles-wrapper .is-root-container > .wp-block-group.ts-products-page,
.editor-styles-wrapper .wp-block-post-content > .wp-block-group.ts-products-page,
.editor-styles-wrapper .ts-products-page {
  width: min(100%, 1200px) !important;
  max-width: 1200px !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
}

.editor-styles-wrapper .ts-products-page > .block-editor-inner-blocks,
.editor-styles-wrapper .ts-products-page > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page > .block-editor-block-list__layout {
  width: 100% !important;
  max-width: none !important;
}

.editor-styles-wrapper :is(.ts-products-hero, .ts-products-intro, .ts-brand-panel, .ts-products-card-grid, .ts-products-step-grid, .ts-products-order) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.editor-styles-wrapper .ts-products-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-hero > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .78fr) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: center !important;
}

.editor-styles-wrapper .ts-products-intro > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-intro > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: clamp(2rem, 6vw, 6rem) !important;
  align-items: start !important;
}

.editor-styles-wrapper .ts-brand-panel > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-brand-panel > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(280px, .86fr) minmax(0, 1.14fr) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: center !important;
}

.editor-styles-wrapper .ts-brand-panel--stagecolor > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-brand-panel--stagecolor > .block-editor-block-list__layout {
  grid-template-columns: minmax(0, 1.14fr) minmax(280px, .86fr) !important;
}

.editor-styles-wrapper .ts-products-card-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-card-grid > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-step-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-step-grid > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.editor-styles-wrapper .ts-products-order > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-order > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, .78fr) minmax(340px, 1.22fr) !important;
  gap: clamp(2.5rem, 7vw, 6rem) !important;
  align-items: start !important;
}

@media (max-width: 1000px) {
  .editor-styles-wrapper .ts-products-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-hero > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-intro > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-intro > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-brand-panel > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-brand-panel > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-order > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-order > .block-editor-block-list__layout {
    grid-template-columns: 1fr !important;
  }

  .editor-styles-wrapper .ts-products-card-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-card-grid > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-step-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-step-grid > .block-editor-block-list__layout {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   3.1.7 – GUTSCHEIN-HERO UND WAXING-KARTEN
   ========================================================= */

.ts-voucher-editor,
.editor-styles-wrapper .ts-voucher-editor {
  --voucher-red: #9f3f45;
  --voucher-ink: #503f45;
  --voucher-muted: #7d6d74;
  --voucher-border: rgba(159, 63, 69, .18);
  --voucher-shadow: 0 22px 58px rgba(80, 63, 69, .09);
  box-sizing: border-box;
  width: min(1120px, calc(100% - 36px)) !important;
  max-width: 1120px !important;
  margin: clamp(2rem, 5vw, 4.5rem) auto clamp(4rem, 8vw, 7rem) !important;
  color: var(--voucher-ink);
}

.ts-voucher-editor *,
.editor-styles-wrapper .ts-voucher-editor * {
  box-sizing: border-box;
}

.ts-voucher-editor .ts-voucher-hero,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(290px, .78fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  margin: 0 !important;
  padding: clamp(1.65rem, 4vw, 4rem);
  overflow: hidden;
  border: 1px solid var(--voucher-border);
  border-radius: clamp(1.8rem, 4vw, 3.6rem);
  background:
    radial-gradient(circle at 0 0, rgba(159, 63, 69, .1) 0 14rem, transparent 14.1rem),
    radial-gradient(circle at 96% 18%, rgba(245, 231, 235, .82) 0 15rem, transparent 15.1rem),
    linear-gradient(135deg, rgba(255, 250, 247, .98), rgba(255, 255, 255, .88));
  box-shadow: var(--voucher-shadow);
}

.ts-voucher-editor .ts-voucher-hero::after,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero::after {
  position: absolute;
  z-index: -1;
  right: -7rem;
  bottom: -9rem;
  width: clamp(16rem, 36vw, 28rem);
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: rgba(159, 63, 69, .075);
}

.ts-voucher-editor .ts-voucher-kicker,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-kicker {
  margin: 0 0 .85rem !important;
  color: var(--voucher-red);
  font-family: var(--ts-sans, sans-serif);
  font-size: clamp(.76rem, 1vw, .9rem);
  font-weight: 850;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ts-voucher-editor .ts-voucher-title,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-title {
  max-width: 680px;
  margin: 0 !important;
  color: var(--voucher-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 5.2vw, 4.8rem) !important;
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.ts-voucher-editor .ts-voucher-lead,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-lead {
  max-width: 650px;
  margin: clamp(1rem, 2vw, 1.45rem) 0 0 !important;
  color: var(--voucher-muted);
  font-size: clamp(1rem, 1.4vw, 1.16rem);
  line-height: 1.58;
}

.ts-voucher-editor .ts-voucher-actions,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.25rem, 2.8vw, 2rem) !important;
}

.ts-voucher-editor .ts-voucher-actions .wp-block-button__link,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.05rem;
  padding: .82rem 1.28rem;
  border: 1px solid var(--voucher-border);
  border-radius: 999px;
  color: var(--voucher-ink);
  background: rgba(255, 255, 255, .82);
  font-family: var(--ts-sans, sans-serif);
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(80, 63, 69, .06);
}

.ts-voucher-editor .ts-voucher-actions .ts-button-red .wp-block-button__link,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-actions .ts-button-red .wp-block-button__link {
  border-color: var(--voucher-red);
  color: #fff;
  background: var(--voucher-red);
}

.ts-voucher-editor .ts-voucher-image-card,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-image-card {
  margin: 0 !important;
  padding: .72rem;
  border: 1px solid var(--voucher-border);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 18px 44px rgba(80, 63, 69, .08);
}

.ts-voucher-editor .ts-voucher-image-card figure,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-image-card figure {
  margin: 0 !important;
}

.ts-voucher-editor .ts-voucher-image-card img,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: clamp(1.1rem, 2.4vw, 1.95rem);
}

.ts-voucher-editor .ts-voucher-form-card,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-form-card {
  width: 100% !important;
  max-width: none !important;
  margin-top: clamp(1.6rem, 4vw, 3.25rem) !important;
  padding: clamp(1.35rem, 3.4vw, 2.65rem) !important;
  border: 1px solid var(--voucher-border);
  border-radius: clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 100% 0, rgba(159, 63, 69, .08) 0 11rem, transparent 11.1rem),
    rgba(255, 255, 255, .76);
  box-shadow: var(--voucher-shadow);
}

.ts-voucher-editor .ts-voucher-form-card h2,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-form-card h2 {
  margin-top: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
}

.ts-voucher-editor .ts-voucher-form-card :where(.fluentform, .frm-fluent-form, form, .ff-el-group, .ff-el-input--content),
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-form-card :where(.fluentform, .frm-fluent-form, form, .ff-el-group, .ff-el-input--content) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
}

/* Der Gruppenblock besitzt im Editor einen zusätzlichen Inner-Blocks-Wrapper. */
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero {
  display: block !important;
}

.editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.04fr) minmax(290px, .78fr) !important;
  gap: clamp(1.5rem, 4vw, 4rem) !important;
  align-items: center !important;
}

#depilation .ts-gb-grid--waxing,
.editor-styles-wrapper #depilation .ts-gb-grid--waxing {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(.9rem, 1.8vw, 1.35rem) !important;
  align-items: stretch !important;
}

#depilation .ts-gb-grid--waxing > .ts-gb-card,
.editor-styles-wrapper #depilation .ts-gb-grid--waxing > .ts-gb-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

#depilation .ts-gb-grid--waxing .ts-treatment-booking {
  align-self: flex-start;
  margin-top: auto !important;
}

@media (max-width: 880px) {
  .ts-voucher-editor .ts-voucher-hero {
    grid-template-columns: 1fr;
  }

  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero > .block-editor-block-list__layout {
    grid-template-columns: 1fr !important;
  }

  #depilation .ts-gb-grid--waxing,
  .editor-styles-wrapper #depilation .ts-gb-grid--waxing {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  .ts-voucher-editor,
  .editor-styles-wrapper .ts-voucher-editor {
    width: calc(100% - 20px) !important;
    margin-top: 1rem !important;
  }

  .ts-voucher-editor .ts-voucher-hero,
  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-hero {
    padding: 1.15rem;
    border-radius: 1.7rem;
  }

  .ts-voucher-editor .ts-voucher-title,
  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-title {
    font-size: clamp(2.25rem, 11vw, 3.2rem) !important;
  }

  .ts-voucher-editor .ts-voucher-actions,
  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ts-voucher-editor .ts-voucher-actions .wp-block-button,
  .ts-voucher-editor .ts-voucher-actions .wp-block-button__link,
  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-actions .wp-block-button,
  .editor-styles-wrapper .ts-voucher-editor .ts-voucher-actions .wp-block-button__link {
    width: 100%;
  }
}

/* =========================================================
   3.1.6 – PRODUKTWELT: DR. GRANDEL + STAGECOLOR
   Ruhige, vollständig responsive Produkt-Landingpage.
   ========================================================= */

.ts-products-template {
  overflow: clip;
}

.ts-products-page,
.editor-styles-wrapper .ts-products-page {
  --products-width: 1120px;
  --products-ink: #503f45;
  --products-muted: #78666d;
  --products-accent: #a33a40;
  --products-line: rgba(159, 93, 105, .22);
  color: var(--products-ink);
  padding: clamp(1.25rem, 3vw, 2.8rem) max(1rem, calc((100% - var(--products-width)) / 2));
}

.ts-products-page > *,
.editor-styles-wrapper .ts-products-page > * {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--products-width);
  margin-inline: auto;
}

.ts-products-page :where(h1, h2, h3, p, figure),
.editor-styles-wrapper .ts-products-page :where(h1, h2, h3, p, figure) {
  box-sizing: border-box;
}

.ts-products-page h1,
.ts-products-page h2,
.ts-products-page h3,
.editor-styles-wrapper .ts-products-page h1,
.editor-styles-wrapper .ts-products-page h2,
.editor-styles-wrapper .ts-products-page h3 {
  color: var(--products-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

.ts-products-page h1,
.editor-styles-wrapper .ts-products-page h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(2.65rem, 5.5vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.ts-products-page h2,
.editor-styles-wrapper .ts-products-page h2 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.8vw, 3.65rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.ts-products-page h3,
.editor-styles-wrapper .ts-products-page h3 {
  margin: 0 0 .55rem;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.15;
}

.ts-products-page p,
.editor-styles-wrapper .ts-products-page p {
  color: var(--products-muted);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.68;
}

.ts-products-page a,
.editor-styles-wrapper .ts-products-page a {
  text-underline-offset: .2em;
}

.ts-products-kicker,
.editor-styles-wrapper .ts-products-kicker {
  margin: 0 0 .85rem !important;
  color: var(--products-accent) !important;
  font-family: var(--ts-sans, sans-serif);
  font-size: .81rem !important;
  font-weight: 800;
  line-height: 1.3 !important;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ts-products-hero,
.editor-styles-wrapper .ts-products-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .78fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: min(680px, 76vh);
  padding: clamp(2.2rem, 6vw, 5.25rem);
  overflow: hidden;
  border: 1px solid rgba(177, 107, 120, .23);
  border-radius: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 0 5%, rgba(240, 217, 222, .82) 0 13rem, transparent 13.1rem),
    radial-gradient(circle at 100% 100%, rgba(225, 199, 207, .52) 0 15rem, transparent 15.1rem),
    linear-gradient(135deg, #fffaf8 0%, #fff 48%, #f8edef 100%);
  box-shadow: 0 28px 74px rgba(91, 60, 70, .09);
}

.ts-products-hero::after,
.editor-styles-wrapper .ts-products-hero::after {
  position: absolute;
  z-index: -1;
  right: 26%;
  bottom: -22%;
  width: 280px;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(163, 58, 64, .14);
  border-radius: 50%;
}

.ts-products-hero__copy,
.editor-styles-wrapper .ts-products-hero__copy {
  position: relative;
  z-index: 2;
}

.ts-products-lead,
.editor-styles-wrapper .ts-products-lead {
  max-width: 640px;
  margin: clamp(1.25rem, 3vw, 1.8rem) 0 0;
  font-size: clamp(1.05rem, 1.65vw, 1.25rem) !important;
}

.ts-products-hero__image,
.editor-styles-wrapper .ts-products-hero__image {
  position: relative;
  z-index: 1;
  width: 100% !important;
  margin: 0 !important;
}

.ts-products-hero__image img,
.editor-styles-wrapper .ts-products-hero__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 999px 999px 30px 30px;
  box-shadow: 0 24px 60px rgba(74, 51, 59, .17);
}

.ts-products-actions,
.editor-styles-wrapper .ts-products-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .72rem;
  margin-top: clamp(1.45rem, 3vw, 2.1rem);
}

.ts-products-actions .wp-block-button__link,
.editor-styles-wrapper .ts-products-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: .85rem 1.35rem;
  border: 1px solid rgba(135, 86, 99, .32);
  border-radius: 999px;
  color: var(--products-ink) !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: 0 10px 26px rgba(80, 57, 65, .07);
  font-family: var(--ts-sans, sans-serif);
  font-size: .93rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.ts-products-actions .ts-products-primary .wp-block-button__link,
.editor-styles-wrapper .ts-products-actions .ts-products-primary .wp-block-button__link {
  color: #fff !important;
  border-color: var(--products-accent);
  background: linear-gradient(135deg, #913237, #b44b50) !important;
}

.ts-products-actions .wp-block-button__link:hover,
.ts-products-actions .wp-block-button__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(80, 57, 65, .13);
}

.ts-products-subnav,
.editor-styles-wrapper .ts-products-subnav {
  position: sticky;
  z-index: 20;
  top: 1rem;
  display: flex;
  justify-content: center;
  gap: .55rem;
  width: max-content !important;
  max-width: min(100%, 780px) !important;
  margin-top: 1rem;
  padding: .55rem;
  overflow-x: auto;
  border: 1px solid var(--products-line);
  border-radius: 999px;
  background: rgba(255, 252, 250, .9);
  box-shadow: 0 13px 36px rgba(78, 56, 64, .08);
  backdrop-filter: blur(16px);
  scrollbar-width: none;
}

.ts-products-subnav::-webkit-scrollbar {
  display: none;
}

.ts-products-subnav a,
.editor-styles-wrapper .ts-products-subnav a {
  flex: 0 0 auto;
  padding: .65rem 1rem;
  border-radius: 999px;
  color: var(--products-ink);
  font-family: var(--ts-sans, sans-serif);
  font-size: .86rem;
  font-weight: 720;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.ts-products-subnav a:hover,
.ts-products-subnav a:focus-visible {
  background: #f4e5e8;
}

.ts-products-section,
.editor-styles-wrapper .ts-products-section {
  margin-top: clamp(4.25rem, 9vw, 8rem);
}

#dr-grandel,
#stagecolor,
#produkte-bestellen {
  scroll-margin-top: 8rem;
}

.ts-products-intro,
.editor-styles-wrapper .ts-products-intro {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-inline: clamp(.25rem, 4vw, 3rem);
}

.ts-products-intro h2,
.editor-styles-wrapper .ts-products-intro h2 {
  max-width: 650px;
}

.ts-products-intro__copy > :first-child,
.editor-styles-wrapper .ts-products-intro__copy > :first-child {
  margin-top: .25rem;
}

.ts-brand-panel,
.editor-styles-wrapper .ts-brand-panel {
  display: grid;
  grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr);
  gap: clamp(2.2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(1.5rem, 5vw, 4.75rem);
  border: 1px solid var(--products-line);
  border-radius: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, rgba(249, 237, 239, .9), rgba(255, 255, 255, .96));
}

.ts-brand-panel--stagecolor,
.editor-styles-wrapper .ts-brand-panel--stagecolor {
  grid-template-columns: minmax(0, 1.14fr) minmax(300px, .86fr);
  background: linear-gradient(135deg, #fff, #f8efeb);
}

.ts-brand-panel--stagecolor .ts-brand-visual,
.editor-styles-wrapper .ts-brand-panel--stagecolor .ts-brand-visual {
  order: 2;
}

.ts-brand-visual,
.editor-styles-wrapper .ts-brand-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 42vw, 500px);
  margin: 0 !important;
  overflow: hidden;
  border-radius: clamp(1.45rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 20% 20%, #fff 0 3rem, transparent 3.1rem),
    radial-gradient(circle at 80% 75%, rgba(178, 83, 91, .13) 0 9rem, transparent 9.1rem),
    linear-gradient(145deg, #f8e8eb, #fff8f5);
}

.ts-brand-visual--logo,
.editor-styles-wrapper .ts-brand-visual--logo {
  border: 1px solid rgba(164, 55, 61, .15);
}

.ts-brand-visual--logo::before,
.editor-styles-wrapper .ts-brand-visual--logo::before {
  position: absolute;
  top: 12%;
  right: -13%;
  width: 58%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid rgba(164, 55, 61, .18);
  border-radius: 50%;
}

.ts-brand-visual--logo img,
.editor-styles-wrapper .ts-brand-visual--logo img {
  position: relative;
  z-index: 2;
  width: min(72%, 270px) !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 24px rgba(91, 38, 42, .1));
}

.ts-brand-visual--logo figure,
.editor-styles-wrapper .ts-brand-visual--logo figure {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0 !important;
}

.ts-brand-visual--logo > p,
.editor-styles-wrapper .ts-brand-visual--logo > p {
  position: relative;
  z-index: 2;
  margin: 1.1rem 0 0;
  color: #8b4549;
  font-family: var(--ts-sans, sans-serif);
  font-size: .77rem;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.ts-brand-visual--photo img,
.editor-styles-wrapper .ts-brand-visual--photo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(340px, 42vw, 500px);
  object-fit: cover;
  object-position: center;
}

.ts-brand-copy > p:not(.ts-products-kicker),
.editor-styles-wrapper .ts-brand-copy > p:not(.ts-products-kicker) {
  max-width: 650px;
}

/* 3.1.8 - DR. GRANDEL Institutswelt mit offiziellen Werbemitteln. */
.ts-grandel-panel-318,
.editor-styles-wrapper .ts-grandel-panel-318 {
  grid-template-columns: minmax(340px, .98fr) minmax(0, 1.02fr);
  gap: clamp(2.4rem, 6vw, 6.25rem);
  background:
    radial-gradient(circle at 5% 8%, rgba(255, 255, 255, .92) 0 8rem, transparent 8.1rem),
    linear-gradient(140deg, #f4f6f5 0%, #fff 52%, #f7eeee 100%);
  box-shadow: 0 24px 68px rgba(69, 78, 81, .085);
}

.ts-grandel-media-318,
.editor-styles-wrapper .ts-grandel-media-318 {
  position: relative;
  min-width: 0;
  padding-bottom: clamp(2.8rem, 6vw, 4.25rem);
}

.ts-grandel-photo-318,
.editor-styles-wrapper .ts-grandel-photo-318 {
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: clamp(1.4rem, 3vw, 2.6rem);
  background: #f5f3f0;
  box-shadow: 0 22px 54px rgba(68, 67, 65, .14);
}

.ts-grandel-photo-318 img,
.editor-styles-wrapper .ts-grandel-photo-318 img {
  display: block;
  width: 100% !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.ts-grandel-logo-card-318,
.editor-styles-wrapper .ts-grandel-logo-card-318 {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 5vw, 3rem);
  bottom: 0;
  left: clamp(1rem, 5vw, 3rem);
  padding: clamp(1rem, 2.3vw, 1.45rem) clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(143, 155, 158, .25);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 46px rgba(60, 71, 74, .13);
  backdrop-filter: blur(14px);
}

.ts-grandel-logo-card-318 figure,
.editor-styles-wrapper .ts-grandel-logo-card-318 figure {
  width: 100%;
  margin: 0 !important;
}

.ts-grandel-logo-card-318 img,
.editor-styles-wrapper .ts-grandel-logo-card-318 img {
  display: block;
  width: min(100%, 390px) !important;
  height: auto !important;
  margin-inline: auto;
}

.ts-grandel-logo-card-318 p,
.editor-styles-wrapper .ts-grandel-logo-card-318 p {
  margin: .7rem 0 0;
  color: #78878a;
  font-family: var(--ts-sans, sans-serif);
  font-size: .72rem;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.ts-grandel-copy-318,
.editor-styles-wrapper .ts-grandel-copy-318 {
  min-width: 0;
}

.ts-grandel-actions-318 .ts-products-primary .wp-block-button__link,
.editor-styles-wrapper .ts-grandel-actions-318 .ts-products-primary .wp-block-button__link {
  border-color: #7f8d90;
  background: linear-gradient(135deg, #697a7d, #96a5a8) !important;
  box-shadow: 0 12px 30px rgba(77, 94, 98, .18);
}

.ts-grandel-shop-banner-318,
.editor-styles-wrapper .ts-grandel-shop-banner-318 {
  width: min(100%, 430px) !important;
  margin: clamp(1.5rem, 3vw, 2.1rem) 0 0 !important;
  overflow: hidden;
  border: 1px solid rgba(125, 140, 143, .25);
  border-radius: 1.25rem;
  background: #f4f4f4;
  box-shadow: 0 14px 34px rgba(64, 74, 77, .09);
}

.ts-grandel-shop-banner-318 a,
.editor-styles-wrapper .ts-grandel-shop-banner-318 a,
.ts-grandel-shop-banner-318 img,
.editor-styles-wrapper .ts-grandel-shop-banner-318 img {
  display: block;
  width: 100% !important;
}

.ts-grandel-shop-banner-318 a {
  transition: transform .25s ease, filter .25s ease;
}

.ts-grandel-shop-banner-318 a:hover,
.ts-grandel-shop-banner-318 a:focus-visible {
  transform: scale(1.012);
  filter: brightness(.985);
  outline: 3px solid rgba(127, 141, 144, .22);
  outline-offset: -3px;
}

.ts-products-card-grid,
.editor-styles-wrapper .ts-products-card-grid,
.ts-products-step-grid,
.editor-styles-wrapper .ts-products-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ts-products-card,
.editor-styles-wrapper .ts-products-card,
.ts-products-step,
.editor-styles-wrapper .ts-products-step {
  min-width: 0;
  padding: clamp(1.35rem, 2.8vw, 2rem);
  border: 1px solid var(--products-line);
  border-radius: 1.6rem;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 14px 38px rgba(75, 50, 59, .055);
}

.ts-products-card p,
.ts-products-step p,
.editor-styles-wrapper .ts-products-card p,
.editor-styles-wrapper .ts-products-step p {
  margin: 0;
  font-size: .98rem;
}

.ts-products-chips,
.editor-styles-wrapper .ts-products-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: 1.2rem;
}

.ts-products-chips p,
.editor-styles-wrapper .ts-products-chips p {
  margin: 0;
  padding: .48rem .85rem;
  border: 1px solid rgba(162, 64, 72, .2);
  border-radius: 999px;
  color: #7d363c;
  background: rgba(250, 233, 236, .72);
  font-family: var(--ts-sans, sans-serif);
  font-size: .82rem;
  font-weight: 740;
  line-height: 1.2;
}

.ts-products-process,
.editor-styles-wrapper .ts-products-process {
  padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: clamp(2rem, 4vw, 3.4rem);
  background: #faf2f1;
}

.ts-products-process > h2,
.editor-styles-wrapper .ts-products-process > h2 {
  max-width: 720px;
}

.ts-products-step strong,
.editor-styles-wrapper .ts-products-step strong {
  display: inline-block;
  margin-bottom: .55rem;
  color: var(--products-accent);
  font-family: var(--ts-sans, sans-serif);
  font-size: .83rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ts-products-order,
.editor-styles-wrapper .ts-products-order {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(360px, 1.22fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
  padding: clamp(2rem, 5vw, 4.75rem);
  border: 1px solid var(--products-line);
  border-radius: clamp(2rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 100% 0, rgba(237, 213, 218, .62) 0 11rem, transparent 11.1rem),
    #fffaf8;
}

.ts-products-order__intro,
.editor-styles-wrapper .ts-products-order__intro {
  position: sticky;
  top: 8rem;
}

.ts-products-order__form,
.editor-styles-wrapper .ts-products-order__form {
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid rgba(155, 93, 104, .2);
  border-radius: 1.7rem;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 50px rgba(72, 50, 58, .08);
}

.ts-products-order__form :where(label, input, textarea, select),
.editor-styles-wrapper .ts-products-order__form :where(label, input, textarea, select) {
  box-sizing: border-box;
  max-width: 100%;
  font-family: var(--ts-sans, sans-serif);
}

.ts-products-order__form label,
.editor-styles-wrapper .ts-products-order__form label {
  display: block;
  color: var(--products-ink);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
}

.ts-products-order__form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select),
.editor-styles-wrapper .ts-products-order__form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) {
  width: 100%;
  margin-top: .38rem;
  padding: .82rem .9rem;
  border: 1px solid rgba(121, 86, 97, .27);
  border-radius: .85rem;
  color: var(--products-ink);
  background: #fff;
  font-size: 1rem;
}

.ts-products-order__form textarea,
.editor-styles-wrapper .ts-products-order__form textarea {
  min-height: 9rem;
  resize: vertical;
}

.ts-products-order__form :where(input, textarea, select):focus {
  border-color: var(--products-accent);
  outline: 3px solid rgba(163, 58, 64, .12);
  outline-offset: 1px;
}

.ts-products-order__form :where(input[type="submit"], button[type="submit"]),
.editor-styles-wrapper .ts-products-order__form :where(input[type="submit"], button[type="submit"]) {
  min-height: 3.2rem;
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #913237, #b44b50);
  box-shadow: 0 12px 28px rgba(145, 50, 55, .18);
  font-family: var(--ts-sans, sans-serif);
  font-size: .94rem;
  font-weight: 760;
  cursor: pointer;
}

.ts-products-note,
.editor-styles-wrapper .ts-products-note {
  margin-bottom: clamp(2rem, 5vw, 4rem);
  padding: 1rem clamp(.25rem, 3vw, 2rem);
  border-top: 1px solid var(--products-line);
}

.ts-products-note p,
.editor-styles-wrapper .ts-products-note p {
  max-width: 900px;
  margin: 0;
  font-size: .84rem;
}

@media (max-width: 900px) {
  .ts-products-hero,
  .editor-styles-wrapper .ts-products-hero,
  .ts-products-intro,
  .editor-styles-wrapper .ts-products-intro,
  .ts-brand-panel,
  .editor-styles-wrapper .ts-brand-panel,
  .ts-brand-panel--stagecolor,
  .editor-styles-wrapper .ts-brand-panel--stagecolor,
  .ts-products-order,
  .editor-styles-wrapper .ts-products-order {
    grid-template-columns: 1fr;
  }

  .ts-products-hero,
  .editor-styles-wrapper .ts-products-hero {
    min-height: 0;
  }

  .ts-products-hero__image,
  .editor-styles-wrapper .ts-products-hero__image {
    width: min(100%, 520px) !important;
    margin-inline: auto !important;
  }

  .ts-brand-panel--stagecolor .ts-brand-visual,
  .editor-styles-wrapper .ts-brand-panel--stagecolor .ts-brand-visual {
    order: 0;
  }

  .ts-grandel-media-318,
  .editor-styles-wrapper .ts-grandel-media-318 {
    width: min(100%, 590px);
    margin-inline: auto;
  }

  .ts-products-order__intro,
  .editor-styles-wrapper .ts-products-order__intro {
    position: static;
  }
}

@media (max-width: 700px) {
  .ts-products-page,
  .editor-styles-wrapper .ts-products-page {
    padding-inline: .8rem;
  }

  .ts-products-hero,
  .editor-styles-wrapper .ts-products-hero,
  .ts-brand-panel,
  .editor-styles-wrapper .ts-brand-panel,
  .ts-products-process,
  .editor-styles-wrapper .ts-products-process,
  .ts-products-order,
  .editor-styles-wrapper .ts-products-order {
    padding: 1.35rem;
    border-radius: 1.8rem;
  }

  .ts-products-hero__image img,
  .editor-styles-wrapper .ts-products-hero__image img {
    aspect-ratio: 4 / 4.6;
  }

  .ts-products-subnav,
  .editor-styles-wrapper .ts-products-subnav {
    justify-content: flex-start;
    width: calc(100% - .5rem) !important;
    max-width: calc(100% - .5rem) !important;
    margin-inline: auto;
    border-radius: 1.2rem;
  }

  .ts-products-card-grid,
  .editor-styles-wrapper .ts-products-card-grid,
  .ts-products-step-grid,
  .editor-styles-wrapper .ts-products-step-grid {
    grid-template-columns: 1fr;
  }

  .ts-brand-visual,
  .editor-styles-wrapper .ts-brand-visual,
  .ts-brand-visual--photo img,
  .editor-styles-wrapper .ts-brand-visual--photo img {
    min-height: 280px;
  }

  .ts-grandel-logo-card-318,
  .editor-styles-wrapper .ts-grandel-logo-card-318 {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin: -2rem .8rem 0;
  }

  .ts-grandel-media-318,
  .editor-styles-wrapper .ts-grandel-media-318 {
    padding-bottom: 0;
  }

  .ts-grandel-shop-banner-318,
  .editor-styles-wrapper .ts-grandel-shop-banner-318 {
    width: 100% !important;
  }

  .ts-products-actions,
  .editor-styles-wrapper .ts-products-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ts-products-actions .wp-block-button,
  .ts-products-actions .wp-block-button__link,
  .editor-styles-wrapper .ts-products-actions .wp-block-button,
  .editor-styles-wrapper .ts-products-actions .wp-block-button__link {
    width: 100%;
  }

  .ts-products-order__form,
  .editor-styles-wrapper .ts-products-order__form {
    padding: 1rem;
  }
}

/* =========================================================
   doTERRA LANDINGPAGE – RUHIG, EDITIERBAR, RESPONSIV
   ========================================================= */

.ts-doterra-template { margin: 0 !important; }

.ts-doterra-page {
  --ts-do-green: #6f7864;
  --ts-do-green-soft: #eef0e8;
  --ts-do-line: rgba(111, 120, 100, .2);
  width: 100%;
  color: var(--ts-ink, #4c3941);
}

.ts-doterra-page,
.ts-doterra-page * { box-sizing: border-box; }

.ts-doterra-section,
.ts-doterra-hero {
  width: min(var(--wp--style--global--wide-size, 1120px), calc(100% - 2 * clamp(1rem, 3vw, 1.75rem))) !important;
  max-width: 1120px !important;
  margin-inline: auto !important;
}

.ts-doterra-hero {
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr) !important;
  align-items: stretch !important;
  gap: clamp(1.5rem, 4vw, 3.5rem) !important;
  margin-block: clamp(1.4rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem) !important;
  padding: clamp(1.2rem, 3vw, 2.4rem) !important;
  border: 1px solid rgba(155,116,131,.16) !important;
  border-radius: clamp(30px, 5vw, 56px) !important;
  background: linear-gradient(135deg, rgba(249,240,242,.88), rgba(255,250,247,.96) 55%, rgba(238,240,232,.72)) !important;
  box-shadow: 0 24px 70px rgba(76,57,65,.08) !important;
}

.ts-doterra-hero__copy {
  align-self: center;
  padding: clamp(.5rem, 2vw, 1.5rem) !important;
}

.ts-doterra-kicker {
  margin: 0 0 1rem !important;
  color: var(--ts-logo-red, #a33b4d) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.ts-doterra-hero h1 {
  max-width: 650px;
  margin: 0 !important;
  font-size: clamp(2.55rem, 5vw, 5rem) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

.ts-doterra-lead {
  max-width: 590px;
  margin: clamp(1.2rem, 2.5vw, 1.65rem) 0 0 !important;
  color: var(--ts-ink-soft, #75656c) !important;
  font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
  line-height: 1.65 !important;
}

.ts-doterra-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-top: clamp(1.35rem, 2.5vw, 1.8rem) !important;
  gap: .75rem !important;
}

.ts-doterra-actions .wp-block-button,
.ts-doterra-cta .wp-block-button {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.ts-doterra-actions .wp-block-button__link,
.ts-doterra-cta .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: .85rem 1.25rem !important;
  border: 1px solid rgba(155,116,131,.3) !important;
  border-radius: 999px !important;
  color: var(--ts-ink, #4c3941) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 25px rgba(76,57,65,.06) !important;
  font-size: .9rem !important;
  font-weight: 760 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
}

.ts-doterra-actions .ts-doterra-primary .wp-block-button__link,
.ts-doterra-cta .ts-doterra-primary .wp-block-button__link {
  color: #fff !important;
  background: var(--ts-logo-red, #a33b4d) !important;
  border-color: var(--ts-logo-red, #a33b4d) !important;
}

.ts-doterra-hero__image {
  min-height: clamp(360px, 42vw, 560px);
  margin: 0 !important;
  overflow: hidden;
  border-radius: clamp(24px, 4vw, 44px) !important;
  background: #f4eee8;
}

.ts-doterra-hero__image img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.ts-doterra-section { margin-bottom: clamp(4rem, 8vw, 7rem) !important; }

.ts-doterra-intro {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  gap: clamp(1.75rem, 5vw, 5rem) !important;
  align-items: start !important;
}

.ts-doterra-section h2 {
  margin: 0 !important;
  font-size: clamp(2rem, 4vw, 3.7rem) !important;
  font-weight: 500 !important;
  line-height: 1.03 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

.ts-doterra-copy p,
.ts-doterra-card p,
.ts-doterra-step p,
.ts-doterra-quality p,
.ts-doterra-source p,
.ts-doterra-note p {
  color: var(--ts-ink-soft, #75656c) !important;
  line-height: 1.65 !important;
}

.ts-doterra-copy > *:first-child,
.ts-doterra-card > *:first-child,
.ts-doterra-step > *:first-child,
.ts-doterra-quality > *:first-child,
.ts-doterra-source > *:first-child { margin-top: 0 !important; }

.ts-doterra-card-grid,
.ts-doterra-step-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(1rem, 2vw, 1.4rem) !important;
  margin-top: clamp(1.75rem, 4vw, 3rem) !important;
}

.ts-doterra-card,
.ts-doterra-step {
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.8rem) !important;
  border: 1px solid var(--ts-do-line) !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 14px 36px rgba(76,57,65,.05) !important;
}

.ts-doterra-card__number,
.ts-doterra-step__number {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin: 0 0 1.2rem !important;
  border-radius: 50%;
  color: var(--ts-do-green) !important;
  background: var(--ts-do-green-soft) !important;
  font-size: .76rem !important;
  font-weight: 820 !important;
}

.ts-doterra-card h3,
.ts-doterra-step h3 {
  margin: 0 0 .65rem !important;
  font-size: clamp(1.18rem, 1.6vw, 1.45rem) !important;
  line-height: 1.2 !important;
}

.ts-doterra-quality {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) !important;
  gap: clamp(1.75rem, 5vw, 4.5rem) !important;
  padding: clamp(1.5rem, 4vw, 3.5rem) !important;
  border-radius: clamp(28px, 5vw, 48px) !important;
  background: linear-gradient(135deg, rgba(238,240,232,.9), rgba(255,250,247,.95)) !important;
}

.ts-doterra-facts {
  display: grid;
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-doterra-facts li {
  position: relative;
  padding: .95rem 1rem .95rem 2.7rem;
  border: 1px solid rgba(111,120,100,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.66);
  color: var(--ts-ink-soft, #75656c);
  line-height: 1.5;
}

.ts-doterra-facts li::before {
  content: "·";
  position: absolute;
  left: 1rem;
  top: .75rem;
  color: var(--ts-logo-red, #a33b4d);
  font-size: 1.5rem;
}

.ts-doterra-source {
  display: grid !important;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
  gap: clamp(1.5rem, 5vw, 4rem) !important;
  align-items: center !important;
  padding: clamp(1.5rem, 4vw, 3rem) !important;
  border-top: 1px solid rgba(155,116,131,.18) !important;
  border-bottom: 1px solid rgba(155,116,131,.18) !important;
}

.ts-doterra-cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: clamp(1.5rem, 4vw, 3.25rem) !important;
  border: 1px solid rgba(155,116,131,.16) !important;
  border-radius: clamp(28px, 5vw, 48px) !important;
  background: linear-gradient(135deg, rgba(249,240,242,.92), rgba(255,255,255,.8)) !important;
}

.ts-doterra-cta .wp-block-buttons {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
}

.ts-doterra-cta p {
  max-width: 720px;
  margin-bottom: 0 !important;
}

.ts-doterra-note {
  margin-top: -3rem !important;
  margin-bottom: clamp(3rem, 6vw, 5rem) !important;
  padding: 1rem 1.15rem !important;
  border-left: 3px solid rgba(155,116,131,.35) !important;
  background: rgba(249,240,242,.45) !important;
}

.ts-doterra-note p {
  margin: 0 !important;
  font-size: .82rem !important;
}

@media (max-width: 900px) {
  .ts-doterra-hero,
  .ts-doterra-intro,
  .ts-doterra-quality,
  .ts-doterra-source,
  .ts-doterra-cta {
    grid-template-columns: 1fr !important;
  }

  .ts-doterra-hero__image {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .ts-doterra-card-grid,
  .ts-doterra-step-grid {
    grid-template-columns: 1fr !important;
  }

  .ts-doterra-cta .wp-block-buttons { justify-content: flex-start !important; }
}

@media (max-width: 560px) {
  .ts-doterra-section,
  .ts-doterra-hero { width: calc(100% - 1.25rem) !important; }

  .ts-doterra-hero {
    padding: .75rem !important;
    border-radius: 28px !important;
  }

  .ts-doterra-hero__copy { padding: 1rem .65rem .5rem !important; }
  .ts-doterra-hero__image { border-radius: 22px !important; }

  .ts-doterra-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .ts-doterra-actions .wp-block-button,
  .ts-doterra-actions .wp-block-button__link,
  .ts-doterra-cta .wp-block-button,
  .ts-doterra-cta .wp-block-button__link {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-doterra-page *,
  #team .ts-team-card {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (max-width: 420px) {
  :root {
    --ts-311-page-gutter: .65rem;
    --ts-311-section-gap: 3rem;
  }

  #start.ts-hero,
  .ts-hero {
    padding-top: 2.35rem !important;
  }
}

/* =========================================================
   3.1.2 – TEAM: DREI RUHIGE, GLEICH HOHE KARTEN
   Porträts und Logo bleiben vollständig sichtbar.
   ========================================================= */

#team .ts-team-grid,
#team > .wp-block-group:last-child,
.editor-styles-wrapper #team .ts-team-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  gap: clamp(1rem, 2vw, 1.45rem) !important;
}

#team .ts-team-grid > *,
#team > .wp-block-group:last-child > *,
.editor-styles-wrapper #team .ts-team-grid > * {
  grid-column: auto !important;
  justify-self: stretch !important;
}

#team .ts-team-card,
.editor-styles-wrapper #team .ts-team-card {
  display: grid !important;
  grid-template-rows: auto auto 1fr !important;
  align-content: start !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: clamp(.85rem, 1.5vw, 1rem) !important;
}

#team .ts-team-card figure,
#team .ts-team-card .wp-block-image,
#team .ts-team-card .ts-placeholder-mark,
.editor-styles-wrapper #team .ts-team-card figure,
.editor-styles-wrapper #team .ts-team-card .wp-block-image,
.editor-styles-wrapper #team .ts-team-card .ts-placeholder-mark {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: none !important;
  height: clamp(170px, 17vw, 210px) !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 0 0 1rem !important;
  padding: .65rem !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(249,240,242,.92), rgba(255,255,255,.9)) !important;
}

#team .ts-team-card img,
.editor-styles-wrapper #team .ts-team-card img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 15px !important;
}

/*
 * Frontend-sicherer Bildrahmen: WordPress kann für das geladene srcset eine
 * intrinsische Höhe setzen. Absolute Abmessungen verhindern, dass der eigentliche
 * Bildinhalt außerhalb des sichtbaren figure-Bereichs liegt.
 */
#team .ts-team-card figure,
#team .ts-team-card .wp-block-image,
.editor-styles-wrapper #team .ts-team-card figure,
.editor-styles-wrapper #team .ts-team-card .wp-block-image {
  position: relative !important;
  display: block !important;
  padding: 0 !important;
}

#team .ts-team-card figure > img,
#team .ts-team-card .wp-block-image > img,
.editor-styles-wrapper #team .ts-team-card figure > img,
.editor-styles-wrapper #team .ts-team-card .wp-block-image > img {
  position: absolute !important;
  inset: .65rem !important;
  display: block !important;
  width: calc(100% - 1.3rem) !important;
  max-width: none !important;
  height: calc(100% - 1.3rem) !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#team .ts-team-card h3,
.editor-styles-wrapper #team .ts-team-card h3 {
  min-height: 2.35em !important;
  margin: 0 0 .55rem !important;
}

@media (max-width: 760px) {
  #team .ts-team-grid,
  #team > .wp-block-group:last-child,
  .editor-styles-wrapper #team .ts-team-grid {
    grid-template-columns: repeat(3, minmax(255px, 82vw)) !important;
    justify-content: start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: .2rem .1rem .75rem !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
  }

  #team .ts-team-card,
  .editor-styles-wrapper #team .ts-team-card {
    scroll-snap-align: start;
  }

  #team .ts-team-card figure,
  #team .ts-team-card .wp-block-image,
  #team .ts-team-card .ts-placeholder-mark,
  .editor-styles-wrapper #team .ts-team-card figure,
  .editor-styles-wrapper #team .ts-team-card .wp-block-image,
  .editor-styles-wrapper #team .ts-team-card .ts-placeholder-mark {
    height: 190px !important;
  }
}

/* =========================================================
   3.1.4 – TEAMVISUALS WIE IM GUTENBERG-EDITOR
   Kein zusätzlicher Rahmen, keine künstlich breite Bildfläche.
   ========================================================= */

#team .ts-team-card figure,
#team .ts-team-card .wp-block-image,
.editor-styles-wrapper #team .ts-team-card figure,
.editor-styles-wrapper #team .ts-team-card .wp-block-image {
  position: relative !important;
  display: block !important;
  width: clamp(168px, 16vw, 190px) !important;
  max-width: 190px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 auto 1.15rem !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

#team .ts-team-card figure::before,
#team .ts-team-card figure::after,
#team .ts-team-card .wp-block-image::before,
#team .ts-team-card .wp-block-image::after {
  content: none !important;
  display: none !important;
}

#team .ts-team-card figure > img,
#team .ts-team-card .wp-block-image > img,
.editor-styles-wrapper #team .ts-team-card figure > img,
.editor-styles-wrapper #team .ts-team-card .wp-block-image > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  #team .ts-team-card figure,
  #team .ts-team-card .wp-block-image,
  .editor-styles-wrapper #team .ts-team-card figure,
  .editor-styles-wrapper #team .ts-team-card .wp-block-image {
    width: 172px !important;
    max-width: 172px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* 3.1.6 – finale Editor-Korrektur nach allen Frontend-Regeln. */
.editor-styles-wrapper .ts-products-page :is(.ts-products-hero, .ts-products-intro, .ts-brand-panel, .ts-products-card-grid, .ts-products-step-grid, .ts-products-order) {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.editor-styles-wrapper .ts-products-page .ts-products-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-hero > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .78fr) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: center !important;
}

.editor-styles-wrapper .ts-products-page .ts-products-intro > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-intro > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-brand-panel > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-brand-panel > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-order > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-order > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  align-items: start !important;
}

.editor-styles-wrapper .ts-products-page .ts-products-card-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-card-grid > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-step-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ts-products-page .ts-products-step-grid > .block-editor-block-list__layout {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.editor-styles-wrapper .ts-products-page .ts-brand-visual--stagecolor {
  min-height: 420px !important;
  background: #0b0b0d !important;
}

@media (max-width: 1000px) {
  .editor-styles-wrapper .ts-products-page .ts-products-hero > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-hero > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-intro > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-intro > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-brand-panel > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-brand-panel > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-order > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-order > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-card-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-card-grid > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-step-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
  .editor-styles-wrapper .ts-products-page .ts-products-step-grid > .block-editor-block-list__layout {
    grid-template-columns: 1fr !important;
  }
}