/* Auflösungsunabhängige Muster. Ausschließlich die Inhaltsfläche trägt den Hintergrund. */
:root {
    --vendiga-pattern-strength: 18%;
    --vendiga-pattern-ink: color-mix(in srgb, var(--vendiga-accent) var(--vendiga-pattern-strength), transparent);
    --vendiga-pattern-none: none;
    --vendiga-size-none: auto;
    --vendiga-pattern-standard: url("/img/musterkanten.png");
    --vendiga-size-standard: cover;
    /* Die SVG-Geometrie wird deterministisch erzeugt und bei Farbwechsel aktualisiert. */
    --vendiga-pattern-grid: none;
    --vendiga-pattern-tiles: none;
    --vendiga-pattern-dots: none;
    --vendiga-pattern-diagonal: none;
    --vendiga-hex-corners: none;
    --vendiga-pattern-corners: var(--vendiga-hex-corners);
    --vendiga-size-corners: 480px auto;
    --vendiga-position-corners: center;
    --vendiga-position-standard: center;
    --vendiga-size-grid: 960px auto;
    --vendiga-size-tiles: 960px 640px;
    --vendiga-size-dots: 960px 640px;
    --vendiga-size-diagonal: 960px 640px;
    --vendiga-content-image: none;
    --vendiga-pattern-custom: var(--vendiga-content-image);
    --vendiga-size-custom: contain;
    --vendiga-fade-size: 50%;
    --vendiga-mask-center: radial-gradient(ellipse at center, transparent var(--vendiga-fade-size), #000 min(100%, calc(var(--vendiga-fade-size) + 20%)));
    --vendiga-mask-inside: radial-gradient(ellipse at center, #000, transparent calc(100% - var(--vendiga-fade-size)));
    --vendiga-mask-left: linear-gradient(to right, #000, transparent calc(100% - var(--vendiga-fade-size)));
    --vendiga-mask-right: linear-gradient(to left, #000, transparent calc(100% - var(--vendiga-fade-size)));
    --vendiga-mask-top: linear-gradient(to bottom, #000, transparent calc(100% - var(--vendiga-fade-size)));
    --vendiga-mask-bottom: linear-gradient(to top, #000, transparent calc(100% - var(--vendiga-fade-size)));
    --vendiga-mask-corners: linear-gradient(135deg, #000, transparent calc(50% - var(--vendiga-fade-size) / 2), transparent calc(50% + var(--vendiga-fade-size) / 2), #000);
    --vendiga-mask-opposite: linear-gradient(45deg, #000, transparent calc(50% - var(--vendiga-fade-size) / 2), transparent calc(50% + var(--vendiga-fade-size) / 2), #000);
}
.vendiga-content-backdrop,
.design-background-sample {
    background-color: var(--vendiga-background);
    background-image: var(--vendiga-content-pattern, none);
    background-size: var(--vendiga-content-size, auto);
    background-position: var(--vendiga-content-position, center);
    background-repeat: var(--vendiga-content-repeat, repeat);
    mask-image: var(--vendiga-content-mask, none);
}
body.vendiga-app { isolation: isolate; }
body.vendiga-authenticated #main-content { min-height: calc(100vh - var(--vendiga-header-height)); background: transparent; }
.vendiga-content-backdrop { position: fixed; top: var(--vendiga-header-height); left: var(--vendiga-sidebar-width); right: 0; bottom: 0; z-index: -1; pointer-events: none; }
body.vendiga-app:not(.vendiga-authenticated) .vendiga-content-backdrop { inset: 0; }
@media (max-width: 1199px) { .vendiga-content-backdrop { left: 0; } }
/* Eigene Bilder behalten ihre Originalfarben und werden weder getönt noch ausgeblendet. */
:root { --vendiga-content-blend: normal; }
.vendiga-content-backdrop, .design-background-sample { background-blend-mode: var(--vendiga-content-blend); }
.design-background-sample { height: 150px; border: 1px solid var(--vendiga-border); border-radius: var(--vendiga-radius); margin-bottom: 18px; }
@media print { .vendiga-content-backdrop { display: none; } }