/* ==========================================
   Base Layout
========================================== */

:root {
  /* Radius-System */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;

  /* Shadow */
  --shadow-1: 0 6px 18px rgba(0,0,0,.08);
  --shadow-2: 0 12px 30px rgba(0,0,0,.10);

  /* Motion */
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --dur-1: 150ms;
  --dur-2: 250ms;

  /* Focus */
  --focus-ring: 3px solid var(--wp--preset--color--primary);
  --focus-offset: 2px;

  /* Layering */
  --z-header: 1000;
  --z-overlay: 99999;

  /* Colors */
  --c-bg: var(--wp--preset--color--light);
  --c-text: var(--wp--preset--color--dark);
  --c-muted: var(--wp--preset--color--gray);
  --c-primary: var(--wp--preset--color--primary);
  --c-surface: var(--wp--preset--color--white);

  /* Sticky */
  --stickybar-height: 64px;
  --stickybar-gap: 16px;
  --stickybar-safe: calc(var(--stickybar-height) + (var(--stickybar-gap) * 2));

  --wm24-consent-height: 100px;
}

  /* Consent */
  --wm24-consent-height: 120px;

/* Mobile Anpassung */
@media (max-width: 768px){
  :root{
    --stickybar-height: 72px;
    --stickybar-gap: 12px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.site-main {
  padding-block: 0 2rem;
}

body {
  margin: 0;
  font-family: var(--wp--preset--font-family--system);
  font-size: var(--wp--preset--font-size--s);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

h1, h2, h3,
button,
.btn,
nav {
  hyphens: none;
}

html {
  hyphens: auto;
  scroll-behavior: smooth;
}

@media (min-width: 600px){
table,
th,
td,
li {
  hyphens: none;
}
}

.archive-section {
  scroll-margin-top: 120px; /* Höhe deines Headers */
}

/* ======================================================
   Layout
   ====================================================== */

.section {
  padding-block: var(--space-6);
}

.flow > * + * {
  margin-top: var(--space-3);
}

.container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--3);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ==========================================
   Scroll Reveal (Performance Friendly)
========================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .6s ease,
    transform .6s ease;
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce Motion Respect */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ==========================================
   Scroll Lock
========================================== */

body.menu-open {
  overflow: hidden;
}

body.menu-open .burger span {
  background: #000;
}