feat: reposition desfoto as an independent brand with four Arbeitsbereiche

site/assets/site.css

@@ -195,6 +195,11 @@ img.frame{width:100%;height:auto;object-fit:cover;transition:transform .8s var(-
 .grid--2{grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
 .grid--3{grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr))}
 .grid--4{grid-template-columns:repeat(auto-fit,minmax(13.5rem,1fr))}
+/* Vier Arbeitsbereiche: vier Spalten auf großen, zwei auf mittleren und eine
+   auf kleinen Schirmen. auto-fit würde bei mittlerer Breite 3+1 Karten setzen. */
+.grid--areas{grid-template-columns:1fr}
+@media (min-width:40rem){.grid--areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
+@media (min-width:72rem){.grid--areas{grid-template-columns:repeat(4,minmax(0,1fr))}}
 .card{display:flex;flex-direction:column;gap:1rem;height:100%}
 .card__title{display:flex;align-items:baseline;gap:.6rem}
 .card__num{font-size:.72rem;font-weight:600;letter-spacing:.16em;color:var(--accent)}