/* Grafikflächen der Konzept-Websites und ihrer Vorschau im Schaufenster.
   Reine CSS-Formen (keine Bilder): Farben kommen aus --acc, --acc2, --ink und --art-bg der jeweiligen Seite.
   Maße in Prozent, damit dieselbe Grafik im kleinen Fenster und auf der ganzen Seite stimmt. */

.art { position: relative; overflow: hidden; isolation: isolate; background: var(--art-bg, #EEE); --bw: 10px; }

.art-stripes { background: repeating-linear-gradient(-45deg, var(--acc) 0 4.5%, var(--acc2) 4.5% 9%); }

.art-circles { background:
  radial-gradient(circle at 68% 38%, var(--acc) 0 24%, transparent 24.4%),
  radial-gradient(circle at 30% 72%, var(--acc2) 0 15%, transparent 15.4%),
  radial-gradient(circle at 80% 84%, var(--acc2) 0 7%, transparent 7.4%),
  var(--art-bg, #EEE); }

.art-arch::before, .art-arch::after { content: ""; position: absolute; bottom: 0; border-radius: 999px 999px 0 0; }
.art-arch::before { left: 18%; right: 18%; top: 12%; background: var(--acc2); }
.art-arch::after { left: 33%; right: 33%; top: 30%; background: var(--acc); }

.art-wheel::before, .art-wheel::after { content: ""; position: absolute; bottom: 16%; width: 38%; aspect-ratio: 1; border-radius: 50%; border: var(--bw) solid var(--ink); background: repeating-conic-gradient(var(--acc) 0 1deg, transparent 1deg 20deg); }
.art-wheel::before { left: 8%; }
.art-wheel::after { right: 8%; }

.art-paw { background:
  radial-gradient(ellipse 20% 15% at 50% 66%, var(--acc) 96%, transparent 100%),
  radial-gradient(ellipse 8% 11% at 27% 42%, var(--acc) 96%, transparent 100%),
  radial-gradient(ellipse 8% 11% at 42% 28%, var(--acc) 96%, transparent 100%),
  radial-gradient(ellipse 8% 11% at 58% 28%, var(--acc) 96%, transparent 100%),
  radial-gradient(ellipse 8% 11% at 73% 42%, var(--acc) 96%, transparent 100%),
  var(--art-bg, #EEE); }

.art-skyline { background:
  linear-gradient(var(--ink), var(--ink)) 8% 100% / 14% 52% no-repeat,
  linear-gradient(var(--acc), var(--acc)) 26% 100% / 16% 72% no-repeat,
  linear-gradient(var(--acc2), var(--acc2)) 45% 100% / 12% 40% no-repeat,
  linear-gradient(var(--ink), var(--ink)) 60% 100% / 18% 84% no-repeat,
  linear-gradient(var(--acc), var(--acc)) 84% 100% / 13% 58% no-repeat,
  var(--art-bg, #EEE); }

.art-grain { background:
  repeating-linear-gradient(98deg, rgba(0, 0, 0, .1) 0 .5%, transparent .5% 2.6%),
  radial-gradient(ellipse 30% 15% at 62% 40%, transparent 0 55%, rgba(0, 0, 0, .22) 56% 60%, transparent 61%),
  radial-gradient(ellipse 19% 9% at 62% 40%, rgba(0, 0, 0, .2) 0 40%, transparent 41%),
  var(--acc2); }

.art-bolt { background: var(--ink); }
.art-bolt::before { content: ""; position: absolute; inset: 8% 22%; background: var(--acc); clip-path: polygon(58% 0, 12% 56%, 46% 56%, 34% 100%, 88% 38%, 54% 38%); }

.art-rings { background:
  repeating-radial-gradient(circle at 68% 42%, var(--acc) 0 2.2%, transparent 2.2% 7%),
  radial-gradient(circle at 68% 42%, var(--ink) 0 6%, transparent 6.4%),
  var(--art-bg, #EEE); }

.art-dots { background:
  radial-gradient(circle at 70% 36%, var(--acc2) 0 16%, transparent 16.4%),
  radial-gradient(circle, var(--acc) 0 1.6px, transparent 2px) 0 0 / 5% 5.5%,
  var(--art-bg, #EEE); }

.art-cup { background:
  linear-gradient(var(--acc2), var(--acc2)) 50% 80% / 62% 3% no-repeat,
  linear-gradient(var(--ink), var(--ink)) 40% 24% / 1.4% 15% no-repeat,
  linear-gradient(var(--ink), var(--ink)) 50% 20% / 1.4% 18% no-repeat,
  linear-gradient(var(--ink), var(--ink)) 60% 24% / 1.4% 15% no-repeat,
  var(--art-bg, #EEE); }
.art-cup::before, .art-cup::after { content: ""; position: absolute; }
.art-cup::before { left: 28%; width: 44%; bottom: 21%; height: 32%; background: var(--acc); border-radius: 3% 3% 46% 46% / 3% 3% 62% 62%; }
.art-cup::after { right: 17%; bottom: 31%; width: 17%; aspect-ratio: 1; border: var(--bw) solid var(--acc); border-radius: 50%; }