/* =====================================================================
   Stundensatz-Vergleich - gilt fuer alle Verkaufsseiten.

   Kadirs Idee (05.11.2026): "normale Freelancer" gegen Freelancer nach dem
   Kurs, am effektiven Stundensatz. Zwei Balken nebeneinander, der rechte
   in Braun, beide fuellen sich, sobald der Block ins Bild kommt
   (assets/vergleich.js). Dunkle Seiten nehmen die Grundform, die helle
   Startseite setzt .vg--hell auf das Raster.

   ACHTUNG ZAHLEN: 100 / 500 sind Kadirs Beispiel vom 05.11.2026 und noch
   nicht belegt. Vor dem Livegang belegen oder anpassen.
   ===================================================================== */

.vg__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: var(--vg-breite, var(--raster, 1440px)); margin: 0 auto;
              background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); }
/* Kacheln im Braun-Look statt Schwarz (Kadir, 05.11.2026): links der
   durchscheinende Grund wie beim Ticket, rechts warmes Braun. */
.vg-balken { background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.035)); padding: clamp(1.75rem, 3vw, 2.5rem); min-width: 0; }
.vg-balken--wir { background: linear-gradient(160deg, rgba(154,113,73,0.42) 0%, rgba(122,88,56,0.32) 55%, rgba(94,67,41,0.28) 100%); }
.vg-balken--wir .vg-balken__spur { background: rgba(0,0,0,0.22); }
.vg-balken__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.vg-balken__wer { font-size: 0.8125rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.vg-balken--wir .vg-balken__wer { color: #D9B38C; }
.vg-balken__wert { font-family: "Fraunces", Georgia, serif; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1; color: #FFFFFF; white-space: nowrap; }
.vg-balken__wert small { font-family: inherit; font-size: 0.4em; color: rgba(255,255,255,0.5); margin-left: 0.25rem; }
.vg-balken__spur { height: 10px; background: rgba(255,255,255,0.08); overflow: hidden; }
.vg-balken__fuellung { display: block; height: 100%; width: var(--anteil, 0%); background: rgba(255,255,255,0.35);
                       transform-origin: left; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.vg-balken--wir .vg-balken__fuellung { background: linear-gradient(90deg, #8F6A44, #D9B38C); }
.vg__raster.ist-sichtbar .vg-balken__fuellung { transform: scaleX(1); }
.vg-balken__text { margin: 1.25rem 0 0; font-size: 0.9375rem; line-height: 1.55; }
.vg__fuss { text-align: center; font-size: 0.8125rem; margin: 1.25rem auto 0; color: rgba(255,255,255,0.45) !important; }
@media (max-width: 760px) { .vg__raster { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vg-balken__fuellung { transition: none; transform: scaleX(1); } }

/* Helle Seiten (Startseite): Karten weiss auf Creme, Schrift in Tinte. */
.vg--hell { background: rgba(17,17,17,0.10); border-color: rgba(17,17,17,0.10); }
.vg--hell .vg-balken { background: #FFFFFF; }
.vg--hell .vg-balken__wer { color: rgba(17,17,17,0.55); }
.vg--hell .vg-balken--wir .vg-balken__wer { color: #8F6A44; }
.vg--hell .vg-balken__wert { color: #111111; }
.vg--hell .vg-balken__wert small { color: rgba(17,17,17,0.45); }
.vg--hell .vg-balken__spur { background: rgba(17,17,17,0.08); }
.vg--hell .vg-balken__fuellung { background: rgba(17,17,17,0.28); }
.vg--hell .vg-balken--wir .vg-balken__fuellung { background: linear-gradient(90deg, #8F6A44, #D9B38C); }
.vg--hell .vg-balken__text { color: rgba(17,17,17,0.65); }
.vg--hell + .vg__fuss { color: rgba(17,17,17,0.45) !important; }