/* Automatisch erzeugt aus src/hintergrund.py. Nicht von Hand ändern. */
body { background: var(--page); }
.site-header { background: var(--page); background: color-mix(in srgb, var(--page) 86%, transparent); }
.section-tint, .sx-solution { background: var(--tint); background: color-mix(in srgb, var(--tint) 50%, transparent); }
.contact { background: transparent; }
.btn-ghost { background: var(--surface); }
.hero-glow { display: none; }
.bgx { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.bgx-pat { position: absolute; left: 0; right: 0; top: -100px; height: calc(100vh + 300px); height: calc(100lvh + 300px); will-change: transform; }
.bgx::after { content: ""; position: absolute; inset: 0; --m: max(0px, calc((100vw - 1240px) / 2)); --x: color-mix(in srgb, var(--page) 90%, transparent);
  background: linear-gradient(90deg, transparent calc(var(--m) - 50px), var(--x) calc(var(--m) + 60px), var(--x) calc(100% - var(--m) - 60px), transparent calc(100% - var(--m) + 50px)); }
@media (max-width: 1100px) { .bgx::after { background: color-mix(in srgb, var(--page) 74%, transparent); } }
.bgx-m { position: absolute; top: 0; left: 0; display: none; transform-origin: 0 0; will-change: transform; opacity: var(--bgo, .62); }
.bgx-m svg { display: block; max-width: none; fill: none; stroke: var(--bgi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; animation: bgxFloat 9s ease-in-out infinite alternate; }
.bgx-m:nth-of-type(2n) svg { animation-duration: 12s; animation-direction: alternate-reverse; }
.bgx-m:nth-of-type(3n) svg { animation-duration: 7s; }
.bgx-m path { stroke-dasharray: 1.01; stroke-dashoffset: calc(var(--d, 0) * 1.01); }
.bgx-m .f { fill: var(--bgi); fill-opacity: calc((1 - var(--d, 0)) * .09); }
.bgx-dot { fill: var(--bgi); stroke: none; opacity: calc(1 - var(--d, 0)); }
.bgx-spin { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--r, 0) * 1deg)); }
.bgx-rev { transform: rotate(calc(var(--r, 0) * -1.5deg)); }
.bgx-blink { animation: bgxBlink 2.4s ease-in-out infinite; }
.bgx-blink.b2 { animation-delay: .5s; } .bgx-blink.b3 { animation-delay: 1s; }
@keyframes bgxFloat { from { transform: translate3d(0, -12px, 0) rotate(-1.2deg); } to { transform: translate3d(0, 12px, 0) rotate(1.2deg); } }
@keyframes bgxBlink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 760px) { .bgx-m { --bgo: .4; } }
@media (prefers-reduced-motion: reduce) { .bgx-m svg, .bgx-blink { animation: none; } .bgx-dot { display: none; } .bgx-pat, .bgx-m { will-change: auto; } }
.finder-result-h { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.03em; }
@media (max-width: 760px) {
  .bgp-ringe .bgx-pat { opacity: .5; }
}
.bgx.is-still .bgx-m svg, .bgx.is-still .bgx-blink { animation: none; }
.bgx.is-still .bgx-dot { display: none; }
.bgx-toggle { display: inline-block; margin-top: 10px; padding: 6px 0; font: inherit; font-size: .88rem; color: var(--dark-ink); background: none; border: 0; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media print { .bgx { display: none; } }

.bgp-plan .bgx-pat { background-image: linear-gradient(var(--g2) 1px, transparent 1px), linear-gradient(90deg, var(--g2) 1px, transparent 1px), linear-gradient(var(--g1) 1px, transparent 1px), linear-gradient(90deg, var(--g1) 1px, transparent 1px); background-size: 160px 160px, 160px 160px, 32px 32px, 32px 32px; }
.bgp-punkte .bgx-pat { background-image: radial-gradient(var(--g3) 1.6px, transparent 1.8px); background-size: 32px 32px; }
.bgp-kreuze .bgx-pat { background-image: radial-gradient(var(--g3) 2.2px, transparent 2.4px), radial-gradient(var(--g2) 1px, transparent 1.2px); background-size: 64px 64px, 32px 32px; background-position: 0 0, 16px 16px; }
.bgp-schraeg .bgx-pat { background-image: repeating-linear-gradient(135deg, var(--g2) 0 1px, transparent 1px 22.63px); }
.bgp-linien .bgx-pat { background-image: linear-gradient(var(--g2) 1px, transparent 1px); background-size: 100% 32px; }
.bgp-ringe .bgx-pat { background-image: repeating-radial-gradient(circle at center, var(--g2) 0 1px, transparent 1px 24px); background-size: 240px 240px; }
.bgp-karo .bgx-pat { background-image: linear-gradient(45deg, var(--g1) 25%, transparent 25%, transparent 75%, var(--g1) 75%), linear-gradient(45deg, var(--g1) 25%, transparent 25%, transparent 75%, var(--g1) 75%); background-size: 64px 64px; background-position: 0 0, 32px 32px; }
.bgt-start { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-bereiche { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-websites { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-it { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-mail { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-buero { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-auto { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-gastro { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-finder { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-pakete { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-beispiele { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-karte { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-person { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-fragen { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-kontakt { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-schutz { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-recht { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-bilder { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
.bgt-verirrt { --page: #e3f0f5; --bgi: #23748f; --g1: rgba(35, 116, 143, 0.06); --g2: rgba(35, 116, 143, 0.11); --g3: rgba(35, 116, 143, 0.24); }
@media (prefers-color-scheme: dark) {
  .bgt-start { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-bereiche { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-websites { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-it { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-mail { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-buero { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-auto { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-gastro { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-finder { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-pakete { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-beispiele { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-karte { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-person { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-fragen { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-kontakt { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-schutz { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-recht { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-bilder { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
  .bgt-verirrt { --page: #04101a; --bgi: #6cc0dd; --g1: rgba(108, 192, 221, 0.05); --g2: rgba(108, 192, 221, 0.09); --g3: rgba(108, 192, 221, 0.2); }
}