/* Dark mode and the [ ] theme switch. html[data-theme] is set before first paint by the head snippet
   (scripts/nav.js, marker theme-head): the visitor's choice (localStorage "theme"), else the system setting. */

/* ---------- the switch: [ sun/moon ] ---------- */
.locales-wrapper { display: flex; align-items: center; gap: .75rem; }
.theme-toggle {
  --t: 420ms cubic-bezier(.65, 0, .35, 1);
  display: inline-flex; align-items: center; gap: .1rem;
  height: 2rem; padding: 0 .15rem; border: 0; border-radius: var(--size--border-radius);
  background: none; color: var(--typo-color--body); cursor: pointer;
  font: 400 1.25rem/1 var(--typo-type--headings); -webkit-tap-highlight-color: transparent;
}
.theme-toggle_bracket { color: var(--colors--primary-orange); transition: transform var(--t); }
.theme-toggle:hover .theme-toggle_bracket:first-child, .theme-toggle:focus-visible .theme-toggle_bracket:first-child { transform: translateX(-3px); }
.theme-toggle:hover .theme-toggle_bracket:last-child, .theme-toggle:focus-visible .theme-toggle_bracket:last-child { transform: translateX(3px); }
.theme-toggle:focus-visible { outline: .125rem solid var(--colors--primary-orange); outline-offset: .125rem; }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; overflow: visible; transition: transform var(--t); }
.theme-toggle_core { fill: currentColor; transition: r var(--t), transform var(--t); transform-origin: center; }
.theme-toggle_bite { transition: cx var(--t), cy var(--t); }
.theme-toggle_rays { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transform-origin: 12px 12px; transition: transform var(--t), opacity var(--t); }
/* dark: the sun's rays fold in, a bite turns the core into a crescent, the icon turns a quarter */
.theme-toggle svg { transform: rotate(90deg); }
[data-theme="dark"] .theme-toggle svg { transform: rotate(0deg); }
[data-theme="dark"] .theme-toggle_core { r: 9px; }
[data-theme="dark"] .theme-toggle_bite { cx: 17px; cy: 7px; }
[data-theme="dark"] .theme-toggle_rays { transform: rotate(45deg) scale(.4); opacity: 0; }
@supports not (r: 1px) { [data-theme="dark"] .theme-toggle_core { transform: scale(1.8); } }

/* circular reveal from the switch (View Transitions; see assets/js/theme.js) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal 650ms cubic-bezier(.65, 0, .35, 1); }
@keyframes theme-reveal { from { clip-path: circle(0 at var(--tx, 100%) var(--ty, 0)); } to { clip-path: circle(var(--tr, 150vmax) at var(--tx, 100%) var(--ty, 0)); } }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle, .theme-toggle * { transition: none !important; }
  ::view-transition-new(root) { animation: none; }
}

/* ---------- dark palette ---------- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"], html[data-theme="dark"] body {
  --colors--white: #13110e;            /* page and card surface (Webflow uses "white" for surfaces) */
  --colors--very-light-grey: #1a1713;  /* raised sections */
  --colors--light-grey: #24201a;
  --colors--almost-white: #f3eee6;
  --colors--border-stroke: #332d25;
  --colors--grey: #a0978a;
  --colors--light-yellow: #2a2412;
  --typo-color--body: #ebe5db;
  --shadows--nav-shadow: #0000;
  --ink: #ebe5db;                      /* text where Webflow hardcodes black */
  --surface-2: #1d1a15;
}
html[data-theme="dark"] body { color: var(--typo-color--body); background-color: var(--colors--white); }

/* hero and team sections are black in both themes; give them a hairline so they don't melt into the page */
html[data-theme="dark"] .section_produkt-hero, html[data-theme="dark"] .hero_content-wrap,
html[data-theme="dark"] .section_team-hero { background-color: #000; box-shadow: 0 1px 0 var(--colors--border-stroke); }

/* text that must stay light on dark surfaces (Webflow uses the "white" variable for it) */
html[data-theme="dark"] .text-color-white, html[data-theme="dark"] .contact-cta_experte-texte,
html[data-theme="dark"] .linked-in-path, html[data-theme="dark"] .case-study-link-block { color: var(--colors--almost-white); }
html[data-theme="dark"] .contact-cta_experte-texte:where(.w-variant-c2b369c3-5d27-98a8-b3d4-3154ebcf33e9) { color: var(--ink); }

/* hardcoded black text, borders and shadows */
html[data-theme="dark"] .text-style-link, html[data-theme="dark"] .w-nav-link, html[data-theme="dark"] .w-nav-brand { color: var(--ink); }
html[data-theme="dark"] .button.is-text, html[data-theme="dark"] .button.is-secondary,
html[data-theme="dark"] .button-copy.is-text, html[data-theme="dark"] .button-copy.is-secondary,
html[data-theme="dark"] .nav_kontakt-button.is-text, html[data-theme="dark"] .nav_kontakt-button.is-secondary { color: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .nav_content { box-shadow: 0 6px 24px #0008, inset 0 0 0 1px var(--colors--border-stroke); }
html[data-theme="dark"] .nav_mega-panel { box-shadow: 0 10px 30px #000a, inset 0 0 0 1px var(--colors--border-stroke); }
html[data-theme="dark"] blockquote, html[data-theme="dark"] .text-style-quote { border-left-color: var(--colors--border-stroke); }
html[data-theme="dark"] .w-input, html[data-theme="dark"] .w-select, html[data-theme="dark"] .form-text-field {
  color: var(--ink); background-color: var(--surface-2); border: 1px solid #4a4238; }
html[data-theme="dark"] .form-text-field:focus { border-color: var(--colors--primary-orange); outline: 0; }
html[data-theme="dark"] .w-input::placeholder, html[data-theme="dark"] .form-text-field::placeholder { color: var(--colors--grey); }
html[data-theme="dark"] mark { color: #000; }
html[data-theme="dark"] .w-nav-button.w--open, html[data-theme="dark"] [data-nav-menu-open] { background-color: var(--colors--very-light-grey); }

/* dark logos and icons drawn in #261f14 or black: render them light */
html[data-theme="dark"] .kundenlogo_list-image,
html[data-theme="dark"] img[src*="logo" i]:not([src*="White"]):not([src*="intcube" i]),
html[data-theme="dark"] img[src*="codeandco"],
html[data-theme="dark"] .nav_mega-menu-chevron,
html[data-theme="dark"] img[src*="arrow-outward"],
html[data-theme="dark"] img[src*="ink-pen"] { filter: brightness(0) invert(.9); }

/* photos: a touch less glare */
html[data-theme="dark"] main img:not([src$=".svg"]) { filter: brightness(.92); }

/* the PE journey (journey.css) uses the black variable for text */
html[data-theme="dark"] .journey-bar__link, html[data-theme="dark"] .journey-card { color: var(--ink); }

/* the [ ] bracket frames around bullet boxes (inline SVG with a light fill) */
html[data-theme="dark"] .klammer-querlinie path { fill: #3a332a; }
html[data-theme="dark"] .klammer_vertikale-linie { background-color: #3a332a; }