/* Shared Ruhrpott materials for the application and standalone legal pages. */
:root {
  --pott-coal: #111318;
  --pott-steel: #2a2e38;
  --pott-rust: #d4540a;
  --pott-light: #f9fafb;
  --pott-muted: #b7bec8;
  --pott-grain: url('/brand/steel-grain.svg');
  --pott-frame: url('/brand/headframe.svg');
  --pott-scene: url('/brand/hero-industrie-sunset.webp');
}

body {
  background: var(--pott-grain), #15171b;
  color: var(--pott-light);
}

.pott-site {
  position: relative;
  isolation: isolate;
  background: linear-gradient(90deg, rgb(125 58 26 / 16%), transparent 3%, transparent 97%, rgb(125 58 26 / 16%)), var(--pott-grain), #111318;
}

.pott-section {
  position: relative;
  isolation: isolate;
  background: var(--pott-grain), linear-gradient(110deg, #101216, #1b1d21);
}

.pott-section::before,
.pott-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--pott-grain), linear-gradient(90deg, #462d23, #a84d23 18%, #33353a 44%, #703b27 76%, #d4540a 95%, #332820);
  pointer-events: none;
}

.pott-section::after {
  content: '';
  position: absolute;
  inset: 30px 2% 20px auto;
  z-index: -1;
  width: min(34%, 360px);
  background: var(--pott-frame) right bottom / contain no-repeat;
  opacity: .22;
  pointer-events: none;
}

.pott-section--scene {
  background: linear-gradient(90deg, rgb(11 13 17 / 96%), rgb(11 13 17 / 80%)), var(--pott-scene) center 58% / cover no-repeat;
}

.pott-section--scene::after { display: none; }

.pott-footer {
  position: relative;
  background: linear-gradient(90deg, rgb(11 13 17 / 97%), rgb(11 13 17 / 84%)), var(--pott-scene) center 66% / cover;
}

/* Legal text remains unmodified; only its surrounding presentation changes. */
body.pott-legal {
  --grau: #b7bec8;
  --beton: #b7bec8;
  background: linear-gradient(90deg, rgb(11 13 17 / 65%), rgb(11 13 17 / 32%)), var(--pott-scene) center top / auto 100vh no-repeat, var(--pott-grain), #111318;
  color: var(--pott-light);
}

.pott-legal .legal-page {
  position: relative;
  isolation: isolate;
  max-width: 920px;
  margin: 108px auto 64px;
  padding: 48px 56px;
  border: 1px solid #45403b;
  border-top: 3px solid var(--pott-rust);
  background: linear-gradient(rgb(17 19 24 / 95%), rgb(17 19 24 / 98%)), var(--pott-grain);
  box-shadow: 0 24px 70px rgb(0 0 0 / 25%);
  overflow-wrap: anywhere;
}

.pott-legal .legal-page::before {
  content: '';
  position: absolute;
  inset: 12px 16px auto auto;
  width: 100px;
  height: 130px;
  background: var(--pott-frame) center / contain no-repeat;
  opacity: .15;
  z-index: -1;
  pointer-events: none;
}

.pott-legal .legal-page :is(h1,h2,h3,h4) { color: var(--pott-light); }
.pott-legal .legal-page :is(p,li) { color: #c9cdd3; }
.pott-legal .legal-page a { color: #ef9865; }
.pott-legal .legal-page a:hover { color: #ffb88e; }
.pott-legal .nav-cta { background: #d4540a; color: #0b0d11; }
.pott-legal :focus-visible { outline: 2px solid #ffb88e; outline-offset: 4px; }
.pott-legal .logo img { width: 146px; height: 56px; object-fit: cover; object-position: center 46%; }
.pott-legal .footer-brand .logo img { width: 146px; height: 56px; }

@media (max-width: 767px) {
  .pott-section::after { width: 44%; opacity: .14; }
  .pott-legal .legal-page { margin: 88px 16px 36px; padding: 28px 22px; }
  body.pott-legal { background-size: auto 650px, auto 650px, auto, auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pott-legal { scroll-behavior: auto; }
  html:has(.pott-legal) { scroll-behavior: auto; }
}