/* Shared design tokens, typography, buttons, surfaces and footer. */

:root {
  --gts-ink: #121916;
  --gts-paper: #f3f2ef;
  --gts-sand: #e8e4db;
  --gts-hover: #43413e;
  --gts-h1: clamp(2.75rem,2rem + 2.7vw,4.5rem);
  --gts-h2: clamp(2.125rem,1.65rem + 1.8vw,3.25rem);
  --gts-h3: clamp(1.375rem,1.15rem + .7vw,1.75rem);
  --gts-h4: clamp(1.25rem,1.1rem + .4vw,1.4375rem);
  --gts-h5: 1.125rem;
  --gts-h6: 1rem;
  --gts-body: clamp(1.0625rem,1rem + .2vw,1.125rem);
  --gts-small: .875rem;
  --gts-section: clamp(3.5rem,2rem + 4vw,6rem);
  --gts-gap: clamp(1.5rem,1rem + 1.5vw,2.5rem);
  --gts-gutter: clamp(1.25rem,4vw,4.5rem);
  --gts-ease: cubic-bezier(.22,1,.36,1);
  --gts-feedback: 220ms;
}

body.gts-theme:not(.gts-digital) #content :is(h1, h2, h3, h4, h5, h6), body.gts-theme:not(.gts-digital) footer :is(h2, h3) {
  letter-spacing: 0px;
  text-transform: none;
  text-wrap: balance;
  margin-block: 0px 1.25rem;
  padding: 0px;
  overflow-wrap: break-word;
}

body.gts-theme:not(.gts-digital) #content h1 {
  font: 400 var(--gts-h1)/1.12 Italiana,serif;
  text-transform: uppercase;
}

body.gts-theme:not(.gts-digital) #content h2, body.gts-theme:not(.gts-digital) footer h2 {
  font: 400 var(--gts-h2)/1.16 Italiana,serif;
  text-transform: uppercase;
}

body.gts-theme:not(.gts-digital) #content h3 {
  font: 400 var(--gts-h3)/1.35 Fahkwang,sans-serif;
}

body.gts-theme:not(.gts-digital) #content h4 {
  font: 400 var(--gts-h4)/1.4 Fahkwang,sans-serif;
}

body.gts-theme:not(.gts-digital) #content p {
  font: 300 var(--gts-body)/1.7 Roboto,sans-serif;
  letter-spacing: 0.015em;
  max-width: 68ch;
  margin-block: 0px 1.25rem;
}

body.gts-theme:not(.gts-digital) #content :is(.gts-ratgeber, .gts-widget-text-editor) li {
  font: 300 var(--gts-body)/1.7 Roboto,sans-serif;
  letter-spacing: 0.015em;
}

body.gts-theme:not(.gts-digital) #content :is(.gts-eyebrow, .gts-preheadline, [data-gts-role="preheadline"]) {
  text-transform: uppercase;
  margin-block: 0px 1rem;
  font: 400 var(--gts-small)/1.6 Fahkwang,sans-serif !important;
  letter-spacing: 0.1em !important;
}

body.gts-theme:not(.gts-digital) #content :is(figcaption, .gts-hero-info, .gts-breadcrumb, .gts-ratgeber__breadcrumbs, .gts-post-info) {
  line-height: 1.6;
  font-size: var(--gts-small) !important;
  letter-spacing: 0.02em !important;
}

body.gts-theme:not(.gts-digital) #content .gts-post__title {
  font-size: var(--gts-h4);
}

body.gts-theme:not(.gts-digital) #content .gts-ratgeber :is(h2, h3) {
  margin-top: 2.5rem;
}

body.gts-theme:not(.gts-digital) #content .gts-ratgeber h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.375rem);
}

body.gts-theme:not(.gts-digital) #content .gts-ratgeber h3 {
  font-size: var(--gts-h4);
}

body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) .gts-button {
  --gts-button-bg: var(--gts-ink);
  --gts-button-fg: var(--gts-paper);
  --gts-button-hover: var(--gts-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  box-sizing: border-box;
  min-height: 52px;
  max-width: 100%;
  padding: 15px 26px;
  border: 1px solid var(--gts-button-bg);
  border-radius: 0px;
  background: var(--gts-button-bg);
  color: var(--gts-button-fg);
  font: 400 var(--gts-button-font-size, 0.875rem) / 1.45 Fahkwang, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transform: translateY(0px);
  transition: background-color var(--gts-feedback) var(--gts-ease),color var(--gts-feedback) var(--gts-ease),border-color var(--gts-feedback) var(--gts-ease),transform var(--gts-feedback) var(--gts-ease);
}

body.gts-theme:not(.gts-digital) #content a.gts-button {
  color: var(--gts-button-fg);
}

body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) :is(.gts-button--light, .gts-surface--dark .gts-button, .gts-surface--dark .gts-button) {
  --gts-button-bg: var(--gts-paper);
  --gts-button-fg: var(--gts-ink);
}

body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) .gts-button:focus-visible {
  outline: currentcolor solid 2px;
  outline-offset: 5px;
  background: var(--gts-button-hover);
  border-color: var(--gts-button-hover);
  color: var(--gts-paper);
}

@media (hover: hover) and (pointer: fine) {
  body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) .gts-button:hover {
    background: var(--gts-button-hover);
    border-color: var(--gts-button-hover);
    color: var(--gts-paper);
    transform: translateY(-2px);
  }

  body.gts-theme:not(.gts-digital) a[data-lightbox]:hover .gts-gallery-item__image {
    transform: scale(1.035);
    filter: none;
  }
}

body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) .gts-button:active {
  transform: translateY(0px);
}

body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) .gts-button span {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

body.gts-theme:not(.gts-digital) #content a:not(:is(.gts-button, [data-lightbox])) {
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  transition: color var(--gts-feedback) var(--gts-ease);
}

body.gts-theme:not(.gts-digital) #content a:not(:is(.gts-button, [data-lightbox])):hover {
  text-decoration: underline;
}

body.gts-theme:not(.gts-digital) .gts-gallery-item__image {
  transition: transform 450ms var(--gts-ease);
}

body.gts-theme .gts-surface--warm {
  background: var(--gts-sand);
  color: var(--gts-ink);
}

body.gts-theme .gts-surface--dark {
  background: var(--gts-ink);
  color: var(--gts-paper);
}

body.gts-theme :is(.gts-surface--light, .gts-surface--warm, .gts-surface--dark) :is(h1, h2, h3, h4, h5, h6, p) {
  color: inherit;
}

body.gts-theme:not(.gts-digital) #content :is(.gts-decision, .gts-guidance, .gts-feature, .gts-selection-faq) {
  padding-block: var(--gts-section);
}

body.gts-theme:not(.gts-digital) #content .gts-material {
  padding-block: var(--gts-section) 2rem;
}

body.gts-theme:not(.gts-digital) #content .gts-material + .gts-material {
  margin-top: 2rem;
}

body.gts-theme:not(.gts-digital) #content :is(.gts-section-intro, .gts-material-heading) {
  margin-bottom: var(--gts-gap);
}

body.gts-theme:not(.gts-digital) #content .gts-actions {
  gap: 1rem 1.75rem;
  margin-top: 1.75rem;
}

body.gts-theme:not(.gts-digital) #content .gts-hero-info {
  margin-top: 1.25rem;
}

body.gts-theme:not(.gts-digital) #content .gts-section-space {
  padding-block: var(--gts-section);
}

body.gts-theme:not(.gts-digital) #content .gts-section-space > .gts-container-inner {
  padding-block: 0px;
}

body.gts-theme:not(.gts-digital) .gts-location-footer {
  --gts-small: 1rem;
  --gts-button-font-size: 1rem;
  margin-top: var(--gts-section);
}

body.gts-theme:not(.gts-digital) .gts-location-footer :is(h2, h3) {
  margin-bottom: 1rem;
}

body.gts-theme:not(.gts-digital) .gts-location-footer h3 {
  font: 400 1.125rem / 1.4 Fahkwang, sans-serif;
}

body.gts-theme:not(.gts-digital) .gts-location-footer :is(p, .gts-item) {
  font-size: var(--gts-small);
  line-height: 1.7;
  letter-spacing: 0.025em;
}

body.gts-theme:not(.gts-digital) .gts-location-footer p {
  margin-bottom: 1rem;
}

body.gts-theme:not(.gts-digital) :is(.gts-nav-menu a, .gts-post__read-more) {
  text-underline-offset: 5px;
}

@media (max-width: 767px) {
  body.gts-theme:not(.gts-digital) #content h1 {
    hyphens: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.gts-theme:not(.gts-digital) :is(.gts-button, .gts-gallery-item__image) {
    transition: none;
    transform: none !important;
  }
}

body.gts-theme .gts-footer-cta {
  width: min(1280px,calc(100% - var(--gts-gutter)*2));
  margin: 0 auto var(--gts-section);
  padding: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: start;
  gap: 2rem clamp(2rem, 5vw, 5rem);
}

body.gts-theme:not(.gts-digital) .gts-footer-cta h2 {
  max-width: 13ch;
  margin: 0px;
}

body.gts-theme:not(.gts-digital) .gts-footer-cta .gts-footer-cta-eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgb(18 25 22 / 25%);
  font: 400 var(--gts-small)/1.5 Fahkwang, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.gts-theme .gts-footer-cta-copy {
  min-width: 0;
  max-width: 45ch;
}

body.gts-theme:not(.gts-digital) .gts-footer-cta-copy > p:first-child {
  font-size: var(--gts-body);
  margin: 0 0 1.5rem;
}

body.gts-theme .gts-footer-cta-copy .gts-button {
  gap: 1rem;
}

body.gts-theme .gts-footer-body {
  padding: var(--gts-section) var(--gts-gutter) 0;
  margin-top: 0px;
}

body.gts-theme .gts-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr 0.8fr;
  gap: var(--gts-gap);
  max-width: 1280px;
  margin: auto;
}

body.gts-theme .gts-footer-grid :is(h3, p, a) {
  color: var(--gts-paper);
}

body.gts-theme .gts-footer-grid p {
  max-width: 34ch;
  font-family: Roboto, sans-serif;
  font-weight: 300;
}

body.gts-theme .gts-footer-grid ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

body.gts-theme .gts-footer-grid li {
  margin: 0px 0px 0.6rem;
  line-height: 1.65;
}

body.gts-theme .gts-footer-grid a {
  display: inline-block;
  font: 300 1rem / 1.7 Roboto, sans-serif;
  padding-block: 0.2rem;
  text-decoration: none;
  text-underline-offset: 5px;
}

body.gts-theme .gts-footer-grid a:hover {
  text-decoration: underline;
}

body.gts-theme .gts-footer-copyright {
  max-width: 1280px;
  margin: 2.5rem auto 0px;
  padding: 1.5rem 0px;
  border-top: 1px solid rgb(99, 113, 105);
}

body.gts-theme .gts-footer-copyright p {
  color: var(--gts-paper);
  margin: 0px;
}

@media (max-width: 1000px) {
  body.gts-theme .gts-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 600px) {
  body.gts-theme .gts-footer-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  body.gts-theme .gts-footer-grid {
    grid-template-columns: 1fr;
  }

  body.gts-theme .gts-footer-grid a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

body.gts-theme .gts-surface--light {
  background: var(--gts-paper);
  color: var(--gts-ink);
}

body.gts-theme:not(.gts-digital) :is(#content, .gts-location-footer) .gts-button:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  opacity: 0.6;
  transform: none;
  cursor: wait;
}

body.gts-theme:not(.gts-digital) #content h5 {
  font: 400 var(--gts-h5)/1.45 Fahkwang,sans-serif;
}

body.gts-theme:not(.gts-digital) #content h6 {
  font: 400 var(--gts-h6)/1.5 Fahkwang,sans-serif;
}
