/* Light / dark for the template pages (all pages). Light = the template's own look (unchanged).
   Dark = every bright area turns dark like the black/navy studio of the 3D parts. Colours only –
   no layout, no content. The template defines its variables on `*`, hence `[data-theme='dark'] *`. */
[data-theme='dark'] * {
  --body-font-color: rgba(255, 255, 255, 0.74);
  --heading-font-color: #ffffff;
  --bg-light: #1a1c3b;
  --bg-grey: #191b36;
  --bg-color-even: #1a1c3b;
  --bg-color-odd: #191b36;
  --border-color: rgba(255, 255, 255, 0.18);
}
[data-theme='dark'] body {
  color: var(--body-font-color);
}
/* The white page background behind the (transparent) content sections. */
[data-theme='dark'] #content {
  background: #12132c;
}

/* Components with fixed light colours ------------------------------------------------------------ */
/* Bottom "previous / next page" cards of the service pages */
[data-theme='dark'] .svc-pag-arrow {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
[data-theme='dark'] .svc-pag-text strong {
  color: #fff;
}
/* Review carousel arrows (home page) */
[data-theme='dark'] .testimonial-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
/* Outline buttons and accordion titles with dark template text */
[data-theme='dark'] a.btn-line,
[data-theme='dark'] a.btn-line:hover,
[data-theme='dark'] .accordion-section-title {
  color: #fff;
}
/* Price calculator (tableserv-preise) */
[data-theme='dark'] .svc-price-includes li,
[data-theme='dark'] .svc-price-summary-row,
[data-theme='dark'] .svc-addon-modal-benefit {
  color: rgba(255, 255, 255, 0.8);
}
[data-theme='dark'] .svc-price-addon-title,
[data-theme='dark'] .svc-price-summary-onetime,
[data-theme='dark'] .svc-addon-modal .modal-title {
  color: #fff;
}
[data-theme='dark'] .svc-price-vat-note,
[data-theme='dark'] .svc-price-addon.is-soon .svc-price-addon-value,
[data-theme='dark'] .svc-price-addon-desc,
[data-theme='dark'] .svc-price-addon-value small,
[data-theme='dark'] .svc-price-disclaimer,
[data-theme='dark'] .svc-price-addon-qty-note,
[data-theme='dark'] .svc-price-addons-note {
  color: rgba(255, 255, 255, 0.66);
}
[data-theme='dark'] .svc-price-addon-check,
[data-theme='dark'] .svc-price-addons-note {
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme='dark'] .svc-price-summary-row,
[data-theme='dark'] .svc-addon-modal .modal-header,
[data-theme='dark'] .svc-addon-modal .modal-footer {
  border-color: rgba(255, 255, 255, 0.1);
}
/* Bootstrap modal of the price calculator */
[data-theme='dark'] .svc-addon-modal .modal-content {
  background: #1a1c3b;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .svc-addon-modal .btn-close {
  filter: invert(1);
}
/* Form fields outside dark sections (contact form): dark fields with light text */
[data-theme='dark'] .form-control,
[data-theme='dark'] .form-select {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.04);
  color: #fff;
}
[data-theme='dark'] .form-control:focus,
[data-theme='dark'] .form-select:focus {
  background-color: rgba(255, 255, 255, 0.07);
  color: #fff;
}
[data-theme='dark'] .form-control::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme='dark'] select.form-control option {
  background: #12132c;
  color: #fff;
}

/* Brand blue on dark backgrounds: the lighter NWS blue (WCAG AA), as on the 3D parts. */
[data-theme='dark'] .subtitle,
[data-theme='dark'] .s2,
[data-theme='dark'] .svc-btn-outline,
[data-theme='dark'] .svc-price-base-label,
[data-theme='dark'] .svc-price-base-more,
[data-theme='dark'] [data-bs-target^='#addonModal'],
[data-theme='dark'] .team-card-info .mb-2 {
  color: #8db0ee;
}
[data-theme='dark'] .svc-btn-outline {
  border-color: rgba(141, 176, 238, 0.6);
}
/* Small grey template texts on the dark cards. */
[data-theme='dark'] .bg-light small,
[data-theme='dark'] .bg-light p,
[data-theme='dark'] .ps-100 p {
  color: rgba(255, 255, 255, 0.74);
}
/* More specific template colours (review carousel, about page, price add-ons). */
[data-theme='dark'] #content .owl-carousel .bg-light p,
[data-theme='dark'] #content .owl-carousel .bg-light small,
[data-theme='dark'] #content .owl-carousel .bg-light a,
[data-theme='dark'] #content .ps-100 p {
  color: rgba(255, 255, 255, 0.74);
}
[data-theme='dark'] .svc-price-addon-value,
[data-theme='dark'] .svc-bald-tag {
  color: #8db0ee;
}

/* Sections with a light background image (set by the template script as inline style): dark in the
   dark theme. Photo banners (#subheader, .jarallax) and dark sections keep their images. */
[data-theme='dark'] #content section[data-bgimage]:not(.section-dark):not(.jarallax):not(#subheader) {
  background-color: #12132c !important;
  background-image: none !important;
}

/* Two-finger zoom must always work (accessibility). The template only allowed vertical panning on
   phones (`touch-action: pan-y` on html/body ≤ 992 px), which blocks pinch-zoom. `manipulation` =
   panning + pinch-zoom, only double-tap zoom off. Horizontal overflow stays prevented (overflow-x: clip). */
html,
body {
  touch-action: manipulation;
}

/* Forms (contact form): the consent checkbox sits on the first line of its text, with a little gap – also on
   phones and in both themes. Only layout/colours; markup, texts and validation unchanged. */
#content .form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
  padding-left: 0;
}
/* more room before the submit button (template utility mb20 = 20 px) */
#content .form-check.mb20 {
  margin-bottom: 34px !important;
}
#content .form-check .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid rgba(18, 19, 44, 0.35);
  border-radius: 6px;
  cursor: pointer;
}
#content .form-check .form-check-label {
  flex: 1 1 auto;
  line-height: 1.55;
  cursor: pointer;
}
#content .form-check .form-check-input:checked {
  border-color: var(--nws-c-primary);
  background-color: var(--nws-c-primary);
  /* the template removes Bootstrap's tick – a white check mark of our own */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
}
#content .form-check .form-check-input:focus-visible,
#content .form-check .form-check-input:focus {
  border-color: var(--nws-c-primary);
  box-shadow: 0 0 0 3px rgba(var(--nws-c-primary-rgb), 0.25);
}
[data-theme='dark'] #content .form-check .form-check-input:not(:checked) {
  border-color: rgba(255, 255, 255, 0.4);
  background-color: #1b1d3d;
}
/* the link colour is set inline in the markup (dark blue) – readable light blue in the dark theme */
[data-theme='dark'] #content .form-check-label a b {
  color: #8db0ee !important;
}

/* Full-bleed template rows (.container-fluid > .row, e.g. the marquee) stuck out 12 px on wide screens and made the
   page scroll sideways – they are clipped to the screen width (clip, not hidden: sticky elements keep working). */
#content section > .container-fluid {
  overflow-x: clip;
}

/* No sideways wiggle on any screen: some template rows are a few pixels wider than their container on phones
   (gutter > container padding). iOS ignores overflow on <body> alone – clip on html and body (clip, not hidden:
   it creates no scroll container, so the sticky tour keeps working). */
html,
body {
  overflow-x: clip;
}

/* "TableServ" (and every word containing it, e.g. "TableServ-Testphase") is never broken or hyphenated –
   js/nws/motion.js wraps each occurrence in .nws-nobreak (texts unchanged). */
.nws-nobreak,
.ts-nowrap {
  white-space: nowrap;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Images that looked the same in both themes (Über uns, reviews on home/services): dark navy on the dark theme was barely visible, the white
   team placeholders glared. In the dark theme they switch to light variants – same approach as the footer N mark.
   Colour: the light NWS blue #8db0ee used for brand elements in the dark theme; team placeholders: the same logo in white. */
[data-theme='dark'] img[src$='images/svg-14.svg'] {
  content: url('/images/nws/svg-14-dark.svg');
}
[data-theme='dark'] img[src$='images/svg-16.svg'] {
  content: url('/images/nws/svg-16-dark.svg');
}
[data-theme='dark'] img[src$='icons-dark/padlock.png'] {
  content: url('/images/nws/icons-light/padlock.png');
}
[data-theme='dark'] img[src$='icons-dark/cloud.png'] {
  content: url('/images/nws/icons-light/cloud.png');
}
[data-theme='dark'] img[src$='icons-dark/quality.png'] {
  content: url('/images/nws/icons-light/quality.png');
}
[data-theme='dark'] .team-card img[src$='NextWeb Software-18.jpg'] {
  content: url('/images/nws/team-placeholder-dark.png'); /* the same logo, white on the dark card */
}
/* reviews (home, services): the black avatar of the placeholder card turns white */
[data-theme='dark'] img[src$='images/svg-20.svg'] {
  filter: invert(1);
}

/* TableServ News: the content is a dark template section (section-dark bg-dark text-light) and looked the same in
   both themes. In the light theme it becomes light like the other pages; the dark theme stays as it was.
   Scoped with :has() to the section holding the news card – no other page is touched, markup and texts unchanged. */
[data-theme='light'] section.section-dark:has(.nws-soon-card) {
  background: var(--bg-light) !important;
  color: var(--body-font-color) !important;
}
[data-theme='light'] section.section-dark:has(.nws-soon-card) :is(h1, h2, h3, h4) {
  color: var(--heading-font-color) !important;
}
[data-theme='light'] section.section-dark:has(.nws-soon-card) :is(p, li, .small) {
  color: var(--body-font-color) !important;
}
[data-theme='light'] .nws-soon-card,
[data-theme='light'] section.section-dark:has(.nws-soon-card) .bg-dark-2 {
  border: 1px solid rgba(17, 16, 19, 0.08);
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(18, 19, 44, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-theme='light'] .nws-soon-badge {
  border-color: rgba(var(--nws-c-primary-rgb), 0.28);
  background: rgba(var(--nws-c-primary-rgb), 0.1);
  color: var(--nws-c-brand);
}
[data-theme='light'] .nws-loading-dots span {
  background: var(--nws-c-brand);
}
[data-theme='light'] section.section-dark:has(.nws-soon-card) a.btn-main.btn-line {
  border-color: rgba(var(--nws-c-primary-rgb), 0.55);
  color: var(--nws-c-brand);
}
[data-theme='light'] section.section-dark:has(.nws-soon-card) a.btn-main.btn-line:hover {
  border-color: var(--nws-c-brand);
  background: rgba(var(--nws-c-primary-rgb), 0.08);
  color: var(--nws-c-brand);
}