/* SUX Service: follows the operating-system/browser preference, without JS,
   cookies, local storage or a manual override. No preference falls back to light. */
:root {
  color-scheme: light;
  --page-bg: #FFFFFF;
  --surface: #EEF3F6;
  --text: #101820;
  --muted: #526477;
  --line: rgba(82, 100, 119, .24);
  --header-bg: rgba(255, 255, 255, .96);
  --control-border: #526477;
  --accent-text: #526477;
  --interactive-text: #08121E;
  --focus-color: #2079CB;
  --on-photo: #F7F9FC;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page-bg: #08121E;
    --surface: #101820;
    --text: #F7F9FC;
    --muted: #B7C3D0;
    --line: rgba(183, 195, 208, .2);
    --header-bg: rgba(8, 18, 30, .96);
    --control-border: #B7C3D0;
    --accent-text: #88C000;
    --interactive-text: #F7F9FC;
    --focus-color: #B7C3D0;
  }
}

body, .section-light, .section-soft, .site-nav, .site-footer {
  background: var(--page-bg);
}
.site-header { background: var(--header-bg); }
.skip-link { color: var(--page-bg); }
.button-secondary, .nav-toggle, .site-nav .nav-contact {
  border-color: var(--control-border);
}
:focus-visible { outline-color: var(--focus-color); }
.hero-note { color: var(--on-photo); }
.benefit-mark, .trust-list span { color: var(--accent-text); }
.secondary-card > a:hover { color: var(--interactive-text); }
.clarity-banner {
  color: var(--text);
  text-shadow: none;
  font-family: "Eurostile Extended", Arial, sans-serif;
  font-size: .75rem;
}

/* The exact existing SUX contours are served in the matching text color. */
picture.brand-wordmark { display: block; }
picture.brand-wordmark > img { width: 100%; height: auto; }

/* Retain a definite image box, including on narrow mobile Safari layouts. */
.hero-grid > .hero-media { width: 100%; min-width: 0; }
.card-image-wrapper { aspect-ratio: 4 / 3; }
.card-image-wrapper > img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

/* The playful desktop interactions stay available. Photos remain clear
   on touchscreens, without JavaScript and with reduced motion enabled. */
.dirt-grid { display: none; }
.card-image-wrapper { cursor: auto; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .effects-ready .dirt-grid { display: grid; }
  .effects-ready .card-image-wrapper {
    cursor: url('../assets/brand/abzieher.png') 16 16, pointer;
  }
}
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .dirt-grid, .sparkle, .shimmer-effect, .happy-popup,
  .rain-emoji, .emoji-stack, .clarity-banner { display: none !important; }
  .hero-grid > .hero-media:hover .hero-img-swap.img-first { opacity: 1; }
  .hero-grid > .hero-media:hover .hero-img-swap.img-second { opacity: 0; }
  .secondary-card:hover { transform: none; }
}
@media (max-width: 650px) {
  .card-image-wrapper { aspect-ratio: 16 / 10; }
}