@property --sit-bewerbungen { syntax: "<integer>"; initial-value: 12; inherits: false; }
@property --sit-gefunden { syntax: "<integer>"; initial-value: 23; inherits: false; }
@property --sit-aufrufe { syntax: "<integer>"; initial-value: 143; inherits: false; }

.skalierungskarte__ziffer {
  width: 3.6rem; min-width: 3.6rem; height: 3.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: .3rem;
  background: var(--farbe-violett-blass);
  color: var(--farbe-violett-kraeftig);
  font: 800 1.9rem/1 Inter, sans-serif;
  font-variant-numeric: tabular-nums;
}
.skalierung--situationen .skalierungskarte__zeile { align-items: center; gap: 1.4rem; }
.skalierung--situationen .skalierungskarte__titel { font-weight: 700; letter-spacing: -.03rem; }
.skalierung--situationen .systemmedium { container-type: inline-size; }

.anzeigenvergleich, .anfahrt, .webfenster, .aufrufzaehler {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4em;
  padding: 2em 1.8em;
  position: relative;
  font-size: clamp(11.5px, 2.6cqw, 17px);
}
.anzeigenvergleich__name, .anfahrt__meldung, .webfenster__suche, .webfenster__feld { margin: 0; }

.anzeigenvergleich__karte {
  background: var(--farbe-weiss);
  border-radius: .4em;
  padding: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  min-width: 0;
}
.anzeigenvergleich__karte--nebenan { box-shadow: var(--schatten-beitrag); }
.anzeigenvergleich__kopf { display: flex; align-items: center; gap: .9em; min-width: 0; }
.anzeigenvergleich__bild { width: 3.6em; height: 3.6em; object-fit: cover; border-radius: .3em; flex-shrink: 0; }
.anzeigenvergleich__name { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.anzeigenvergleich__name b { font-weight: 700; font-size: 1.25em; line-height: 1.2; color: var(--farbe-tinte); }
.anzeigenvergleich__name span { font-weight: 500; font-size: 1em; line-height: 1.3; color: var(--farbe-text-zweit); }
.anzeigenvergleich__leute { display: flex; gap: .55em; }
.anzeigenvergleich__platz, .anzeigenvergleich__person {
  width: 2.5em; height: 2.5em; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
}
.anzeigenvergleich__platz { border: 1.5px dashed var(--farbe-text-blass); }
.anzeigenvergleich__person { background: var(--farbe-violett-blass); color: var(--farbe-violett-kraeftig); }
.anzeigenvergleich__person svg { width: 1.3em; height: 1.3em; display: block; }
.anzeigenvergleich__zahl {
  display: flex; align-items: baseline; gap: .5em; margin: 0;
  font-weight: 500; font-size: 1.05em; line-height: 1; color: var(--farbe-text-zweit);
}
.anzeigenvergleich__wert { font-weight: 800; font-size: 2.6em; line-height: 1; color: var(--farbe-tinte); font-variant-numeric: tabular-nums; }
.anzeigenvergleich__wert--steigt { counter-reset: bew var(--sit-bewerbungen); color: var(--farbe-violett-kraeftig); }
.anzeigenvergleich__wert--steigt::after { content: counter(bew); }

.ist-sichtbar .anzeigenvergleich__wert--steigt { animation: sit-bewerbungen 10s var(--kurve-weich) infinite; }
.ist-sichtbar .anzeigenvergleich__person { animation: sit-person 10s var(--kurve-feder) infinite; }
.ist-sichtbar .anzeigenvergleich__person:nth-child(2) { animation-delay: .5s; }
.ist-sichtbar .anzeigenvergleich__person:nth-child(3) { animation-delay: 1s; }
.ist-sichtbar .anzeigenvergleich__person:nth-child(4) { animation-delay: 1.5s; }
@keyframes sit-bewerbungen { 0%, 8% { --sit-bewerbungen: 0; } 50%, 92% { --sit-bewerbungen: 12; } 100% { --sit-bewerbungen: 0; } }
@keyframes sit-person { 0%, 12% { transform: scale(0); opacity: 0; } 20%, 90% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(0); opacity: 0; } }

.anfahrt__karte {
  background: var(--farbe-weiss);
  border-radius: .4em;
  padding: 1.6em 1.4em 1.4em;
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  min-width: 0;
}
.anfahrt__strecke { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8em; }
.anfahrt__ort { display: flex; flex-direction: column; align-items: center; gap: .4em; font-weight: 600; font-size: .95em; line-height: 1.2; color: var(--farbe-text-zweit); }
.anfahrt__ort svg { width: 1.8em; height: 1.8em; display: block; }
.anfahrt__ort--nachbar { color: var(--farbe-text-stumm); }
.anfahrt__ort--hier { color: var(--farbe-tinte); }
.anfahrt__ort--hier svg { color: var(--farbe-violett-kraeftig); }
.anfahrt__weg { position: relative; height: 2.6em; min-width: 0; }
.anfahrt__linie { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--farbe-text-blass); }
.anfahrt__wagen {
  position: absolute; top: 50%; left: 0;
  width: 2.8em; height: 2.8em; margin-top: -1.4em;
  display: grid; place-items: center;
  background: var(--farbe-tinte); color: var(--farbe-weiss); border-radius: .3em;
}
.anfahrt__wagen svg { width: 1.6em; height: 1.6em; display: block; }
.anfahrt__baustelle {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9em;
  padding: .9em; border-radius: .3em; background: var(--farbe-flaeche); min-width: 0;
}
.anfahrt__baustelle img { width: 4em; height: 4em; object-fit: cover; border-radius: .2em; flex-shrink: 0; }
.anfahrt__text { display: flex; flex-direction: column; gap: .3em; min-width: 0; flex: 1 1 8em; }
.anfahrt__text b { font-weight: 700; font-size: 1.1em; line-height: 1.25; color: var(--farbe-tinte); }
.anfahrt__text span { font-weight: 500; font-size: .95em; line-height: 1.3; color: var(--farbe-text-zweit); }
.anfahrt__stempel {
  flex-shrink: 0; margin-left: auto; padding: .45em .7em; border-radius: .3em;
  background: var(--farbe-tinte); color: var(--farbe-weiss); font-weight: 700; font-size: .9em; line-height: 1;
}
.anfahrt__meldung {
  align-self: center;
  display: flex; align-items: center; gap: .6em;
  padding: .75em 1.2em; border-radius: 10em;
  background: var(--farbe-weiss); box-shadow: var(--schatten-beitrag);
  font-weight: 600; font-size: 1.05em; line-height: 1.2; color: var(--farbe-tinte);
}
.anfahrt__meldung svg { width: 1.3em; height: 1.3em; display: block; color: var(--farbe-violett-kraeftig); flex-shrink: 0; }

.ist-sichtbar .anfahrt__wagen { animation: sit-wagen 10s var(--kurve-druck) infinite; }
.ist-sichtbar .anfahrt__stempel { animation: sit-stempel 10s var(--kurve-feder) infinite; }
.ist-sichtbar .anfahrt__meldung { animation: sit-meldung 10s var(--kurve-aus) infinite; }
@keyframes sit-wagen { 0%, 6% { left: 0; } 44%, 92% { left: calc(100% - 2.8em); } 100% { left: 0; } }
@keyframes sit-stempel { 0%, 46% { transform: scale(0); opacity: 0; } 54%, 92% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes sit-meldung { 0%, 60% { transform: translateY(.8em); opacity: 0; } 68%, 92% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(.8em); opacity: 0; } }
[data-ablaufmedium]:not(.ist-sichtbar) .anfahrt__wagen { left: calc(100% - 2.8em); }

.webfenster__suche {
  align-self: center;
  display: flex; align-items: center; gap: .6em;
  padding: .75em 1.3em; border-radius: 10em; background: var(--farbe-weiss);
  font-weight: 500; font-size: 1.05em; line-height: 1.2; color: var(--farbe-tinte); max-width: 100%; min-width: 0;
}
.webfenster__suche svg { width: 1.2em; height: 1.2em; display: block; flex-shrink: 0; color: var(--farbe-text-zweit); }
.webfenster__suchtext { white-space: nowrap; overflow: hidden; min-width: 0; }
.webfenster__fenster { background: var(--farbe-weiss); border-radius: .4em; overflow: hidden; min-width: 0; }
.webfenster__leiste { display: flex; align-items: center; gap: .4em; padding: .75em 1em; border-bottom: 1px solid var(--farbe-linie); }
.webfenster__leiste i { width: .65em; height: .65em; border-radius: 50%; background: var(--farbe-linie); flex-shrink: 0; }
.webfenster__adresse { flex: 1 1 auto; min-width: 0; height: 1.3em; margin-left: .6em; border-radius: 10em; background: var(--farbe-flaeche); }
.webfenster__inhalt { padding: 1.1em 1.1em .5em; display: flex; flex-direction: column; gap: .65em; }
.webfenster__bild { display: block; height: 5.6em; border-radius: .2em; background: var(--farbe-flaeche-karte); }
.webfenster__zeile { display: block; height: .65em; border-radius: .8em; background: var(--farbe-text-blass); }
.webfenster__zeile:nth-child(2) { width: 82%; }
.webfenster__zeile:nth-child(3) { width: 58%; }
.webfenster__statistik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--farbe-linie); border-top: 1px solid var(--farbe-linie); }
.webfenster__feld { background: var(--farbe-weiss); padding: 1em 1.1em; display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.webfenster__beschriftung { font-weight: 500; font-size: .95em; line-height: 1.25; color: var(--farbe-text-zweit); }
.webfenster__wert { font-weight: 800; font-size: 2.4em; line-height: 1; color: var(--farbe-tinte); font-variant-numeric: tabular-nums; }
.webfenster__wert--gefunden { counter-reset: gef var(--sit-gefunden); }
.webfenster__wert--gefunden::after { content: counter(gef); }
.webfenster__feld--null { background: var(--farbe-violett-blass); }
.webfenster__feld--null .webfenster__wert { color: var(--farbe-violett-kraeftig); }
.webfenster .zeiger { opacity: 1; left: 62%; top: 22%; width: 1.8em; height: 1.8em; }

.ist-sichtbar .webfenster__suchtext { animation: sit-tippen 10s steps(22) infinite; }
.ist-sichtbar .webfenster__wert--gefunden { animation: sit-gefunden 10s var(--kurve-weich) infinite; }
.ist-sichtbar .webfenster .zeiger { animation: sit-zeiger 10s var(--kurve-maus-korr) infinite; }
.ist-sichtbar .webfenster__feld--null { animation: sit-null 10s var(--kurve-weich) infinite; }
@keyframes sit-tippen { 0%, 4% { max-width: 0; } 28%, 92% { max-width: 22ch; } 100% { max-width: 0; } }
@keyframes sit-gefunden { 0%, 30% { --sit-gefunden: 0; } 62%, 92% { --sit-gefunden: 23; } 100% { --sit-gefunden: 0; } }
@keyframes sit-zeiger { 0%, 26% { left: 62%; top: 22%; } 36%, 92% { left: 46%; top: 46%; } 100% { left: 62%; top: 22%; } }
@keyframes sit-null { 0%, 64% { box-shadow: inset 0 0 0 0 var(--farbe-violett-kraeftig); } 70%, 92% { box-shadow: inset 0 0 0 2px var(--farbe-violett-kraeftig); } 100% { box-shadow: inset 0 0 0 0 var(--farbe-violett-kraeftig); } }

.aufrufzaehler { flex-direction: row; align-items: center; justify-content: center; gap: 2.6em; }
.aufrufzaehler__handy {
  width: 12em; flex-shrink: 0;
  background: var(--farbe-tinte); border-radius: 1.6em; padding: .7em;
}
.aufrufzaehler__video { position: relative; aspect-ratio: 9 / 16; border-radius: 1.1em; overflow: hidden; background: var(--farbe-flaeche-dunkel); }
.aufrufzaehler__video img { width: 115%; height: 115%; margin: -7.5%; object-fit: cover; display: block; }
.aufrufzaehler__abspielen {
  position: absolute; left: 50%; top: 50%; width: 3.2em; height: 3.2em; margin: -1.6em 0 0 -1.6em;
  border-radius: 50%; background: var(--farbe-flaeche-hell); display: grid; place-items: center; color: var(--farbe-weiss);
}
.aufrufzaehler__abspielen svg { width: 1.3em; height: 1.3em; display: block; margin-left: .15em; }
.aufrufzaehler__werte {
  background: var(--farbe-weiss); border-radius: .4em; padding: 1.6em 1.8em;
  width: 21em; max-width: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: .6em;
}
.aufrufzaehler__beschriftung { margin: 0; font-weight: 600; font-size: 1.05em; line-height: 1.2; color: var(--farbe-text-zweit); }
.aufrufzaehler__zahl { margin: 0; font-weight: 800; font-size: 4em; line-height: 1; color: var(--farbe-tinte); font-variant-numeric: tabular-nums; counter-reset: auf var(--sit-aufrufe); }
.aufrufzaehler__zahl::after { content: counter(auf); }
.aufrufzaehler__kurve { width: 100%; height: 4em; display: block; }
.aufrufzaehler__kurve path { fill: none; stroke: var(--farbe-violett-kraeftig); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 0; }

.ist-sichtbar .aufrufzaehler__video img { animation: sit-wackeln 1.6s ease-in-out infinite; }
.ist-sichtbar .aufrufzaehler__zahl { animation: sit-aufrufe 10s var(--kurve-aus) infinite; }
.ist-sichtbar .aufrufzaehler__kurve path { animation: sit-kurve 10s var(--kurve-weich) infinite; }
@keyframes sit-wackeln {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-1.5%, 1%) rotate(-1deg); }
  50% { transform: translate(1%, -1.5%) rotate(.8deg); }
  75% { transform: translate(1.5%, 1%) rotate(-.5deg); }
}
@keyframes sit-aufrufe { 0%, 6% { --sit-aufrufe: 0; } 40%, 92% { --sit-aufrufe: 143; } 100% { --sit-aufrufe: 0; } }
@keyframes sit-kurve { 0%, 6% { stroke-dashoffset: 300; } 60%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 300; } }

@media screen and (width >= 641px) {
  .skalierung--situationen .skalierungskarte:last-child:nth-child(odd) .systemmedium { aspect-ratio: 21 / 9; }
  .skalierung--situationen .skalierungskarte:last-child:nth-child(odd) .aufrufzaehler { font-size: clamp(11.5px, 1.5cqw, 18px); }
}
@media screen and (width >= 1025px) {
  .skalierungskarte__ziffer { width: 36px; min-width: 36px; height: 36px; font-size: 18px; border-radius: 3px; }
  .skalierung--situationen .skalierungskarte__titel { font-size: 24px; line-height: 1.2; }
  .skalierung--situationen .skalierungskarte__zeile { gap: 14px; margin-bottom: 10px; }
}
@media screen and (width <= 640px) {
  .skalierungskarte__ziffer { width: 3rem; min-width: 3rem; height: 3rem; font-size: 1.6rem; }
  .aufrufzaehler { flex-direction: column; gap: 1.2em; }
  .aufrufzaehler__handy { width: 8.5em; }
  .aufrufzaehler__werte { width: 100%; padding: 1.2em 1.4em; }
}

@media (prefers-reduced-motion: reduce) {
  .ist-sichtbar .anzeigenvergleich__wert--steigt, .ist-sichtbar .anzeigenvergleich__person,
  .ist-sichtbar .anfahrt__wagen, .ist-sichtbar .anfahrt__stempel, .ist-sichtbar .anfahrt__meldung,
  .ist-sichtbar .webfenster__suchtext, .ist-sichtbar .webfenster__wert--gefunden, .ist-sichtbar .webfenster .zeiger,
  .ist-sichtbar .webfenster__feld--null, .ist-sichtbar .aufrufzaehler__video img,
  .ist-sichtbar .aufrufzaehler__zahl, .ist-sichtbar .aufrufzaehler__kurve path { animation: none; }
  .anfahrt__wagen { left: calc(100% - 2.8em); }
}