/* clean.css — CLEAN-1 additions (post-rebuild, approved 2026-10-08). Not part of the Webflow export:
   these rules do not exist in the original stylesheet. Loaded LAST on every page that has a header
   (after the locale file), so it needs no !important except where it must beat inline styles that
   reveal.js writes. For users without the settings below nothing changes visually.
   Regression guard: with this file the computed style / rects / pixels of all pages are unchanged
   (apart from the hero overflow-x, see 1) at the 12 test widths. */

/* 1) Issue 27: the hero decoration (.absolute.top.nav) sticks out to the right of the viewport at
   1280 px (right edge 1305 px) and widens the document (scrollWidth 1305). Only the horizontal axis
   is clipped, so the decorations that deliberately stick out of the section vertically stay as they
   are; the clipped part lies outside the viewport anyway. */
.section.hero {
  overflow-x: clip;
}

/* 2) Visible keyboard focus. The original removes the outline of several controls (tabs, language
   dropdown, menu button); :focus-visible matches keyboard focus only, so mouse / touch interaction
   looks as before. Dark ring on the light page, white ring inside the dark-blue boxes (Newsletter,
   Contact). Text inputs keep their own focus style (border colour). */
a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
.w-tab-link:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-nav-button:focus-visible {
  outline: 2px solid var(--dark-blue);
  outline-offset: 2px;
}

.bg-dark-blue a:focus-visible,
.bg-dark-blue button:focus-visible,
.bg-dark-blue input[type="submit"]:focus-visible,
.bg-dark-blue [role="button"]:focus-visible {
  outline-color: var(--white);
}

/* The contact cards are white cards inside the dark Contact box: dark ring again. */
.bg-dark-blue .contact-team a:focus-visible {
  outline-color: var(--dark-blue);
}

/* The open mobile menu (.w-nav-overlay, <= 991 px) clips everything outside its box and its links reach
   the right edge of it, so there the ring is drawn inside the link instead of outside. */
.w-nav-overlay a:focus-visible,
.w-nav-overlay [role="button"]:focus-visible {
  outline-offset: -2px;
}

/* 3) prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  /* No scroll-in reveal: the content is visible at once, without movement. !important beats the
     inline opacity / transform / transition that reveal.js writes while an effect would run. */
  html.w-mod-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Reference logos: no marquee. Every unique logo is shown in one centred row that wraps; the two
     copies of the row that exist only to make the loop seamless are hidden. */
  .logos-container2 {
    justify-content: center;
  }

  .logos-container2 .logos-row2 {
    animation: none;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    padding-left: 0;
  }

  .logos-container2 .logos-row2 ~ .logos-row2 {
    display: none;
  }
}

/* CLEAN-2 UNIT A — remaining horizontal overflow (issues 29 / 41 / 44 / 48 and 51; approved, see verify/clean2-plan.md).
   About tabs (≤ 767 px): the export collapses the tab grid to one column only for the first and the last pane
   (about.css:481); the four middle panes keep `1fr 1.75fr`, whose automatic track minimum (min-content of the
   heading / content cells) widens the page. All panes now use one column, like the first and last already do.
   !important because the exported #w-node-… id selectors outrank any class. Nothing changes from 768 px up. */
@media (max-width: 767px) {
  .tab-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Only the narrow phone layout needs hyphenation (DE "Rechnungsverarbeitung:" is wider than the column at 375 px);
   at 480–767 px the headings fit and keep today's line breaks. */
@media (max-width: 479px) {
  .tab-wrapper .heading-default {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* Demo pages "Why is our demo not online?" cards (issue 51): the grid track minimum is the fixed 330 px card.
   Scoped to the two ranges where the page is wider than the viewport today (≤ 399 px: one 390 px column;
   992–1079 px: three 330 px columns in a narrower stack; measured boundary: HEAD overflows up to 1079 px, 1080 px is the first width without overflow). 400–991 px and ≥ 1080 px are unchanged. */
@media (max-width: 399px) {
  .quick-stack-2 > * {
    min-width: 0;
  }
}

@media (min-width: 992px) and (max-width: 1079px) {
  .quick-stack-2 > * {
    min-width: 0;
  }

  .quick-stack-2 .card {
    max-width: 100%;
  }
}

/* CLEAN-2 UNIT B3 — skip link (approved). The first focusable element of the page; visually hidden above the viewport
   until it receives keyboard focus, so the normal layout and pixels are unchanged (it is absolutely positioned, takes no
   space and cannot widen the page). Target: the hero section (#main-content). */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 12px 20px;
  background-color: var(--dark-blue);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transform: translateY(-100%);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

/* CLEAN-3 / website privacy: footer link next to the copyright line */
.copyright a {
  color: inherit;
  text-decoration: underline;
}

/* website privacy: link inside the existing consent label (same words, now linked) */
.w-form-label a {
  color: inherit;
  text-decoration: underline;
}

/* contact / demo forms (shared contact backend): honeypot, Turnstile widget + hint, result blocks */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-turnstile[hidden],
.contact-form__verifying[hidden] {
  display: none;
}

.cf-turnstile {
  margin-bottom: 10px;
}

.contact-form__verifying {
  margin: 0 0 10px;
  font-size: 0.875rem;
}

.w-form-done.is-visible,
.w-form-fail.is-visible {
  display: block;
  margin-top: 10px;
  color: var(--black);
}

/* Section widths on large screens (>= 1920px).
   The original stylesheet gave Reference and Contact (.container-default.reference and
   .container-default.bg-dark-blue.color-white) max-width 85vw from 1920px, while Team, Why Oriogo and the
   footer keep 90vw, so the sections stacked on top of each other had different widths (visible from 2560px).
   Approved fix: one common width (90vw) for all section containers. */
@media screen and (min-width: 1920px) {
  .container-default.reference,
  .container-default.bg-dark-blue.color-white {
    max-width: 90vw;
  }
}